js选项卡制作

最新推荐文章于 2022-11-13 20:35:01 发布

aoject

最新推荐文章于 2022-11-13 20:35:01 发布

阅读量539

点赞数

分类专栏：前端开发（html+css+js）文章标签： js javascript 选项卡

本文链接：https://blog.csdn.net/ao_xiaoqiang/article/details/44018743

版权

前端开发（html+css+js）专栏收录该内容

17 篇文章 0 订阅

订阅专栏

初学js，写了一个很简单但是很实用的一个选项卡，如有不足请多多拍砖，共同进步。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3.0综合练习</title>
<style type="text/css">
body, div, p, ul, li, span, a {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#myTab {
	margin: 50px auto;
	width: 480px;
	height: 200px;
	border: 1px solid #666;
}
/* tab_title */
.tab_bl_t, .tab_bl_c { overflow: hidden; }
.tab_bl_t > li {
	float: left;
	height: 40px;
	width: 119px;
	border-left: 1px solid #666;
	border-bottom: 1px solid #666;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	background: #CCC;
}
.tab_bl_t > li:first-child { border-left: none; }
.tab_bl_t > li:hover {
	font-weight: 700;
	background: #DEDEDE;
}
.tab_bl_t > li.cur {
	border-bottom: none;
	background: #FFF;
	border-top:1px solid #0F0;
}
/* tab_content */
.tab_bl_c > li {
	padding: 10px 15px;
	display: none;
}
.tab_bl_c > li.cur { display: block; }
</style>
</head>

<body>
<div id="myTab">
  <ul id="myTab_titles" class="tab_bl_t">
    <li>2012</li>
    <li class="cur">2013</li>
    <li>2014</li>
    <li>2015</li>
  </ul>
  <ul id="myTab_contents" class="tab_bl_c">
    <li>2012大事记……</li>
    <li class="cur">2013大事记……</li>
    <li>2014大事记……</li>
    <li>2015大事记……</li>
  </ul>
</div>
</body>
</html>
<script type="text/javascript">
	var t_titles = document.getElementById("myTab_titles").getElementsByTagName("li");
	var t_contents = document.getElementById("myTab_contents").getElementsByTagName("li");
	for(var i=0; i<t_titles.length; i++){
		t_titles[i].index = i;
		t_titles[i].onclick = function(){
			for(var j=0; j<t_titles.length; j++){
				t_titles[j].className = "";
				t_contents[j].className = "";
			}
			this.className = "cur";
			t_contents[this.index].className = "cur";
		}
	}
</script>