Bootstrap tab页切换的使用

最新推荐文章于 2021-12-13 00:35:31 发布

lucky(๑ᵔ⌔ᵔ๑)

最新推荐文章于 2021-12-13 00:35:31 发布

阅读量203

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_46509187/article/details/106806468

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
<base target="_self">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-ridate">
<meta http-equiv="expires" content="0">
 
<title>tab页切换</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<style type="text/css">
</style>
</head>
 
<div class="tab">
	<ul id="mylTab" class="nav nav-tabs">
			<li class="active"  style="margin-left: -2.8%;"><a href="#cx" data-toggle="tab">查询</a></li>
			<li><a href="#tj" data-toggle="tab">统计</a></li>
	</ul>
</div>
 
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<script type="text/javascript">
 
 
</script>
</body>
 
</html>

//列明细点击tab时触发事件
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
	var activeTab = $(e.target)[0].hash;
	if(activeTab == '#cx'){
		//专项数据分析查询
		activeTab == '#cx';

    	if (typeof(lmxTable) != "undefined") {
			var tb = document.getElementById("aTable");
		    if (tb.getElementsByTagName("thead").length != 0) {
		        tb.removeChild(tb.children[0]);
		    }
		}
    	return false;
	}else if(activeTab == '#tj'){
		//专项数据分析统计
		activeTab == '#tj';

    	if (typeof(mxtjLTable) != "undefined") {
			var tb = document.getElementById("bTable");
		    if (tb.getElementsByTagName("thead").length != 0) {
		        tb.removeChild(tb.children[0]);
		    }
		}
		return false;
	}
});

//根据id选取某个标签
$('#myTab a[href="#profile"]').tab('show')
//选取第一个标签
$('#myTab a:first').tab('show')
//选取最后一个标签
$('#myTab a:last').tab('show')
//选取第二个标签
$('#myTab li:eq(2) a').tab('show')

lucky(๑ᵔ⌔ᵔ๑)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap tab页切换的使用

<!DOCTYPE html><html lang="en"><head><base target="_self"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" conten
复制链接

扫一扫