BootStrap多个tab页面保存提交后停留在操作tab页或者指定tab页的功能实现

jQ+ Bootstrap 动态控制tab页面切换

最近在做一个功能,一个页面包含多个tab页签,每一个tab页面都有保存和提交按钮功能,

现在是希望在某个tab页面点击保存或者提交按钮提交表单后,重新加载的页面停留在当前操作的tab页面或者某个指定tab页的功能

现截取关键部分代码供参考

jsp部分:

<ul class="nav nav-tabs" id="myTab">  
        <li id ='li-696931' class="active"><a id="table-696931" href="#panel-696931" data-toggle="tab"><b>A信息</b></a></li>  
        <li id ='li-539171'><a id="table-539171" href="#panel-539041" data-toggle="tab"><b>  B信息 </b></a></li>  
        <li id ='li-539042'><a id="table-539042" href="#panel-539042" data-toggle="tab" ><b> C信息 </b></a></li>  
        <li id ='li-539041'><a id="table-539041" href="#panel-539043" data-toggle="tab"><b>  D信息 </b></a></li>  
</ul>  
<p class="tab-content">  
<p class="tab-pane active" id="panel-696931">  
    <p>A信息</p>  
</p>  
<p class="tab-pane" id="panel-539041">  
    <p> B信息</p>  
</p>  
<p class="tab-pane" id ="panel-539042">  
    <p> C信息</p>  
</p>  
  
<p class="tab-pane" id="panel-539043">  
    <p> D信息</p>  
</p>  

关键部分

通过以下tab切换触发函数,获取选中tab的id

//tab页切换   
        $('#myTab a').click(function (e) {  
         //   e.preventDefault();  
           var i = $(this).attr("id");//获取选中tab 的id  
           $("#active2").val(i.substring(6));//截取部分数字id  
        })  

保存提交表单后,后台获取隐藏控件传来的id值,再处理完逻辑后重新传到前端页面

前端页面依据id对tab页的active样式增删来进行调控刷新页面后,tab页面默认选中那个

通过给需要选中的tab增加active样式来控制tab页签

//保存按钮提交后,tab选中页初始化控制  
    var active2 = "${active2}"; //jsp设置一个隐藏控件 name="active2"来接受tab切换时的填入的值  
        switch(active2)  
        {  
         case '539042':  
             tabClass(539042);  
             break;  
         case '539071':  
             tabClass(539071);  
             break;  
         default:  
             tabClass(0);  
             break;  
        }   

//保存后 tab页样式调整  
function tabClass(n){  
    if (n == '539042') {  
         $('#li-696931').removeClass("active");    
         $('#panel-696931').removeClass("active");   
         $('#li-539071').removeClass("active");    
         $('#panel-539071').removeClass("active");   
           
         $('#li-539042').addClass("active");   
         $('#panel-539042').addClass("active");  
    }else if (n == '539071') {  
        $('#li-696931').removeClass("active");    
        $('#panel-696931').removeClass("active");   
        $('#li-539042').removeClass("active");    
        $('#panel-539042').removeClass("active");   
       
        $('#li-539071').addClass("active");   
        $('#panel-539071').addClass("active");  
   }else {  
       $('#li-539071').removeClass("active");    
        $('#panel-539071').removeClass("active");   
        $('#li-539042').removeClass("active");    
        $('#panel-539042').removeClass("active");   
       
        $('#li-696931').addClass("active");   
        $('#panel-696931').addClass("active");  
   }