javscript__Tab切换

最新推荐文章于 2022-07-12 22:28:24 发布

Clover_hxt

最新推荐文章于 2022-07-12 22:28:24 发布

阅读量379

点赞数

分类专栏： *Javascript 文章标签： Tab切换

本文链接：https://blog.csdn.net/huxiaotong12/article/details/46754497

版权

*Javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

完整代码：

<head>
	<meta charset="UTF-8">
	<title>Tab切换</title>
	<style>
		ul{padding:0;margin:0;list-style: none;}
		.tab{width: 400px;}
		.tab-menuWraper{padding-left: 20px;}
		.tab-menuWraper li{
			float: left;
			display: inline-block;
			padding:5px;
			border: 1px solid #333;
			border-bottom: none;
			margin-right: 5px;
		}
		.tab-contentWraper{
			border: 1px solid #333;
			clear: left;
			padding: 5px;
		}
	</style>
</head>

<body>
	<!-- 复杂点的结构 -->
	<div class="tab J_tab">
		<ul class="tab-menuWraper">
			<li class="J_tab-menu">menu1</li>
			<li class="J_tab-menu">menu2</li>
			<li class="J_tab-menu">menu3</li>
		</ul>
		<div class="tab-contentWraper">
			<div class="J_tab-content">
				<div>content1</div>
				<ul>
					<li>abc</li>
				</ul>
			</div>
			<div class="J_tab-content" style="display:none">
				<p>content2</p>
				<div>abc</div>
			</div>
			<div class="J_tab-content" style="display:none">content3</div>
		</div>
	</div>
	<br>
	<!-- 复杂点的结构 -->
	<div class="tab J_tab">
		<ul class="tab-menuWraper">
			<li class="J_tab-menu">menu1</li>
			<li class="J_tab-menu">menu2</li>
			<li class="J_tab-menu">menu3</li>
		</ul>
		<div class="tab-contentWraper">
			<div class="J_tab-content">
				<div>content1</div>
				<ul>
					<li>abc</li>
				</ul>
			</div>
			<div class="J_tab-content" style="display:none">
				<p>content2</p>
				<div>abc</div>
			</div>
			<div class="J_tab-content" style="display:none">content3</div>
		</div>
	</div>
</body>

<script type="text/javascript">
	// 创建命名空间
	var GLOBAL = {};
	GLOBAL.namespace = function (str) {
		var arr = str.split(".");
		var o = GLOBAL;
		for(i = (arr[0] == "GLOBAL") ? 1 : 0; i < arr.length; i++){
			o[arr[i]] = o[arr[i]] || {};
			o = o[arr[i]];
		};
	}
	GLOBAL.namespace("Dom");
	// 获取类名
	GLOBAL.Dom.getElementsByClassName = function (str, root, tag) {
		if (root) {
			root = typeof root == "string" ? document.getElementById(root) : root;
		}else{
			root = document.body;
		}
		tag = tag || "*";
		var els = root.getElementsByTagName(tag);
		var arr = [];
		for(var i = 0, n = els.length; i < n; i++){
			for(var j=0, k=els[i].className.split(" "), l=k.length; j<l; j++){
				if(k[j] == str){
					arr.push(els[i]);
					break;
				}
			}
		}
		return arr;
	}
	function setTab (root) {
		var tabMenus = GLOBAL.Dom.getElementsByClassName("J_tab-menu",root);
		var tabContents = GLOBAL.Dom.getElementsByClassName("J_tab-content",root);
		for(var i = 0; i < tabMenus.length; i++){
			tabMenus[i]._index = i;
			tabMenus[i].onclick = function(){
				for(var j = 0; j < tabContents.length; j++){
					tabContents[j].style.display = "none";
				}
				tabContents[this._index].style.display = "block";
			}
		}
	}
	var tabs = GLOBAL.Dom.getElementsByClassName("J_tab");
	for(var i = 0; i < tabs.length; i++){
		setTab(tabs[i]);
	}
</script>

加了tab高亮后的完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tab切换</title>
	<style>
		ul{padding:0;margin:0;list-style: none;}
		.tab{width: 400px;}
		.tab-menuWraper{padding-left: 20px;}
		.tab-menuWraper li{
			float: left;
			display: inline-block;
			padding:5px;
			border: 1px solid #333;
			border-bottom: none;
			margin-right: 5px;
		}
		.tab-contentWraper{
			border: 1px solid #333;
			clear: left;
			padding: 5px;
		}
		/*高亮*/
		.tab .tab-currentMenu{ background-color: #333;color: #fff;}
		.underLine{ text-decoration: underline;}
	</style>
</head>
<body>
	<!-- 复杂点的结构 -->
	<div class="tab J_tab">
		<ul class="tab-menuWraper">
			<li class="J_tab-menu tab-currentMenu">menu1</li>
			<li class="J_tab-menu">menu2</li>
			<li class="J_tab-menu underLine">menu3</li>
		</ul>
		<div class="tab-contentWraper">
			<div class="J_tab-content">
				<div>content1</div>
				<ul>
					<li>abc</li>
				</ul>
			</div>
			<div class="J_tab-content" style="display:none">
				<p>content2</p>
				<div>abc</div>
			</div>
			<div class="J_tab-content" style="display:none">content3</div>
		</div>
	</div>
	<br>
	<!-- 复杂点的结构 -->
	<div class="tab J_tab">
		<ul class="tab-menuWraper">
			<li class="J_tab-menu tab-currentMenu">menu1</li>
			<li class="J_tab-menu">menu2</li>
			<li class="J_tab-menu">menu3</li>
		</ul>
		<div class="tab-contentWraper">
			<div class="J_tab-content">
				<div>content1</div>
				<ul>
					<li>abc</li>
				</ul>
			</div>
			<div class="J_tab-content" style="display:none">
				<p>content2</p>
				<div>abc</div>
			</div>
			<div class="J_tab-content" style="display:none">content3</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	// 创建命名空间
	var GLOBAL = {};
	GLOBAL.namespace = function (str) {
		var arr = str.split(".");
		var o = GLOBAL;
		for(i = (arr[0] == "GLOBAL") ? 1 : 0; i < arr.length; i++){
			o[arr[i]] = o[arr[i]] || {};
			o = o[arr[i]];
		};
	}
	GLOBAL.namespace("Dom");
	// 获取类名
	GLOBAL.Dom.getElementsByClassName = function (str, root, tag) {
		if (root) {
			root = typeof root == "string" ? document.getElementById(root) : root;
		}else{
			root = document.body;
		}
		tag = tag || "*";
		var els = root.getElementsByTagName(tag);
		var arr = [];
		for(var i = 0, n = els.length; i < n; i++){
			for(var j=0, k=els[i].className.split(" "), l=k.length; j<l; j++){
				if(k[j] == str){
					arr.push(els[i]);
					break;
				}
			}
		}
		return arr;
	}
	// 追加类名
	GLOBAL.Dom.addClass=function (node,str){
		if(!new RegExp("(^|\\s+)" + str).test(node.className)){
			node.className = node.className + " " + str;
		}
	}
	// 删除固定类名
	GLOBAL.Dom.removeClass = function (node,str){
		node.className = node.className.replace(RegExp("(^|\\s+)"+str),"");
	}
	function setTab (root) {
		var tabMenus = GLOBAL.Dom.getElementsByClassName("J_tab-menu",root);
		var tabContents = GLOBAL.Dom.getElementsByClassName("J_tab-content",root);
		for(var i = 0; i < tabMenus.length; i++){
			tabMenus[i]._index = i;
			tabMenus[i].onclick = function(){
				for(var j = 0; j < tabContents.length; j++){
					tabContents[j].style.display = "none";
				}
				tabContents[this._index].style.display = "block";

				// 如果有当前选中标签，则去掉"tab-currentMenu"
				var currentMenu = GLOBAL.Dom.getElementsByClassName("tab-currentMenu",root)[0];
				if(currentMenu){
					GLOBAL.Dom.removeClass(currentMenu,"tab-currentMenu");
				}
				
				// 给当前被点击的按钮挂上当前选中的class
				GLOBAL.Dom.addClass(this,"tab-currentMenu");
			}
		}
	}
	var tabs = GLOBAL.Dom.getElementsByClassName("J_tab");
	for(var i = 0; i < tabs.length; i++){
		setTab(tabs[i]);
	}
</script>
</html>