Java全栈之Tab选项卡的正确使用方法。

当有多个Tab选项卡的时候，如果Java后端一次性传值到前端页面，第一次加载势必会加载很慢，那么就需要分Tab卡片加载数据。

所以我的实现方式是，一个Tab选项卡代表一个页面，然后通过Ajax请求到Java后端返回视图到代表的选项卡页面。回调整个页面到父页面中。

具体实现方法如下：

HTML如下：

 

 1   <div class="portlet-body">
 2 
 3                 <div class="tabbable-line">
 4                     <input type="hidden" th:value="${index}" id="index"/>
 5                     <ul class="nav nav-tabs" id="tab">
 6                         <li>
 7                             <a onclick="showTab(this,1)" data-toggle="tab">基本信息(BasicMation)</a>
 8                         </li>
 9                         <li class="">
10                             <a onclick="showTab(this,2)" data-toggle="tab">来往记录(Record)</a>
11                         </li>
12                         <li class="">
13                             <a onclick="showTab(this,3)" data-toggle="tab">客户反馈(CoupleBack)</a>
14                         </li>
15                         <li class="">
16                             <a onclick="showTab(this,4)" data-toggle="tab">联系人(Contacts)</a>
17                         </li>
18                         <li>
19                             <a href="#tab_1_2" data-toggle="tab">财务资料(Financial)</a>
20                         </li>
21                         <li>
22                             <a href="#tab_1_3" data-toggle="tab">物流资料(Logistics)</a>
23                         </li>
24 
25                         <li>
26                             <a href="#tab_1_8" data-toggle="tab">资质要求(Require)</a>
27                         </li>
28                         <li>
29                             <a href="#tab_1_12" data-toggle="tab">提醒记录(Remind)</a>
30                         </li>
31                     </ul>
32                     <div class="tab-content" id="content">
33                             //此处为子页面回调渲染的地方
34                     </div>
35                 </div>
36 
37             </div>        

View Code