您现在的位置是:首页 > 正文

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

2024-02-01 03:09:11阅读 2

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");
       }





网站文章

  • 手把手教你搭建自己的git+gerrit代码评审服务器

    手把手教你搭建自己的git+gerrit代码评审服务器

    你可能遇到过这样的问题,不知道如何管理自己的代码。自己开发的代码,过了几天,忘记修改了什么,忘了上次改到哪了,代码突然找不到了等等,甚至容易消磨自己的耐心,成就感不高。今天就教你用git+gerrit...

    2024-02-01 03:09:04
  • 每日面试题(三)----深拷贝

    每日面试题(三)----深拷贝

    深拷贝与浅拷贝

    2024-02-01 03:08:35
  • 离线安装docker

    离线安装docker

    在/usr/lib/systemd/system/目录下,创建docker.service文件:sudo touch /usr/lib/systemd/system/docker.service。编辑...

    2024-02-01 03:08:19
  • java数据结构和算法

    java数据结构和算法

    java数据结构与算法

    2024-02-01 03:08:11
  • 多标签mAP解释和计算

    多标签mAP计算

    2024-02-01 03:08:04
  • 【VMware】VMware 虚拟机使用笔记

    【VMware】VMware 虚拟机使用笔记

    目录 共享文件夹配置 VMware问题记录 VMware安装出错error 1021 Vmware虚拟机Ubuntu未发现WiFi适配器解决方案汇总 添加域名解析服务器 虚拟机没有网络(不显示网络图标)解决方法 虚拟机添加新硬盘的方法 共享文件夹配置 在vmware上操作: 1.1打开 虚拟机 --> 设置 1.2在 「虚拟...

    2024-02-01 03:07:35
  • mysql 全文检索 demo

    mysql 全文检索 demo

    mysql5.6.7之后开始支持中文全文检索 模拟插入点数据,是的 存储过程。

    2024-02-01 03:07:29
  • [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收

    [033] 微信公众帐号开发教程第9篇-QQ表情的发送与接收

    我想大家对QQ表情一定不会陌生,一个个小头像极大丰富了聊天的乐趣,使得聊天不再是简单的文字叙述,还能够配上喜、怒、哀、乐等表达人物心情的小图片。本文重点要介绍的内容就是如何在微信公众平台使用QQ表情,即在微信公众帐号开发模式下,如何发送QQ表情给用户,以及如何识别用户发来的是QQ表情。 QQ表情代码表 首先需要明确的是:QQ表情虽然呈现为一张张动态的表情图片,但在微信公众平台的消息接口中却...

    2024-02-01 03:07:23
  • 【MySQL系列】 MySQL表的增删改查(进阶)

    【MySQL系列】 MySQL表的增删改查(进阶)

    MySQL表的增删改查的进阶部分的内容~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    2024-02-01 03:06:55
  • idea无法下载源码 idea cannot download sources解决办法

    idea无法下载源码 idea cannot download sources解决办法

    idea cannot download sources解决办法

    2024-02-01 03:06:46