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

叁歲伎倆 2022-05-24 07:20 239阅读 0赞

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

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

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

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

jsp部分:

关键部分

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