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

最新推荐文章于 2023-11-24 00:00:00 发布

chao430

最新推荐文章于 2023-11-24 00:00:00 发布

阅读量4.1k

点赞数 1

分类专栏： web前端

本文链接：https://blog.csdn.net/chao430/article/details/80415805

版权

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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>
<div class="tab-content">
<div class="tab-pane active" id="panel-696931">
	<p>A信息</p>
</div>
<div class="tab-pane" id="panel-539041">
	<p> B信息</p>
</div>
<div class="tab-pane" id ="panel-539042">
	<p> C信息</p>
</div>

<div class="tab-pane" id="panel-539043">
	<p> D信息</p>
</div>

关键部分

通过以下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");
       }