javascript 实现tab选项卡

最新推荐文章于 2024-04-28 10:55:39 发布

waterport

最新推荐文章于 2024-04-28 10:55:39 发布

阅读量675

点赞数

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/yanloveyang/article/details/41480273

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tab选项卡</title>
	<style>
		*{
			padding: 0px;
			margin: 0px;
			font-family: microsoft yahei;
			font-size: 14px;
		}
		#tab{
			width: 333px; 
			height: 300px;
			position:absolute;
			top: 100px;
			left: 100px;
		}


		/*选项卡标签样式*/
		.tab_tit{
			width: 80px;
			height: 25px;
			line-height: 25px;
			border-radius: 4px 4px 0px 0px;
			background: #f60;
			color: #fff;
			text-align: center;
			display: inline-block;
		}


		.tab_tit:hover{
			background: #090;
		}


		.active{
			background: #090;
		}
		
		.tab_con{
			height: 100%;
			padding: 10px;
			border: 1px solid #999;
			border-radius: 0px 0px 4px 4px;
			display: none;
		}


		.visiable{
			display: block;
		}
	</style>


	<script type="text/javascript">
	    /**
	     * 切换选项卡
	     * @return {[type]} [description]
	     */
		function switch_tab()
		{
			var tits = document.getElementsByClassName("tab_tit");
			var cons = document.getElementsByClassName("tab_con"); 
			for (var i = 0; i < tits.length; i++) {
				tits[i].index = i ;
				tits[i].onclick = function () {
					for (var i = 0; i < tits.length; i++) {
						tits[i].className="tab_tit";
					};
					this.className +=" active";
					//切换选项卡对应的content
					for (var i = 0; i < cons.length; i++) {
						cons[i].className = "tab_con";
					};
					//根据tab的index属性来操作对应的tab标签
					cons[this.index].className += " visiable";
				}
			}
			
		}


		//当window加载完成操作
		window.onload = function(){
			switch_tab();
		}
	</script>
</head>
<body>
	<div id="tab">
		<div class="tab_tit">标签1</div>
		<div class="tab_tit">标签2</div>
		<div class="tab_tit">标签3</div>
		<div class="tab_tit">标签4</div>


		<div class="tab_con visiable">内容1</div>
		<div class="tab_con">内容2</div>
		<div class="tab_con">内容3</div>
		<div class="tab_con">内容4</div>
	</div>
</body>
</html>

waterport

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 实现tab选项卡

Tab选项卡 *{ padding: 0px; margin: 0px; font-family: microsoft yahei; font-size: 14px; } #tab{ width: 333px; height: 300px; position:absolute; top: 100px; left: 100px;
复制链接

扫一扫