一共两个大案例
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<style type="text/css">
/* CSS样式制作 */
* {
margin: 0px;
padding: 0px;
font: 12px normal "microsoft yahei";
}
a {
text-decoration: none;
color: black;
display: block;
}
a:hover {
text-decoration: none;
color: #336699;
}
#tabs ul {
list-style: none;
display: block;
height: 30px;
line-height: 30px;
border-bottom: 2px solid saddlebrown;
width: 300px;
}
#tabs ul li {
float: left;
cursor: pointer;
width: 60px;
height: 28px;
line-height: 28px;
margin: 0 3px;
border: 1px solid #aaaaaa;
border-bottom: none;
text-align: center;
}
#tabs ul li.on {
border-top: 2px solid saddlebrown;
border-bottom: 2px solid #fff;
}
#tabs div {
width: 290px;
height: 120px;
line-height: 25px;
border: 1px solid #336699;
border-top: none;
padding: 5px;
}
.hide {
display: none;
}
</style>
<script type="text/javascript">
// JS实现选项卡切换
window.onload = function() {
var oTab = document.getElementById("tabs");
var oUl = oTab.getElementsByTagName("ul")[0];
var oLis = oUl.getElementsByTagName("li");
var oDivs = oTab.getElementsByTagName("div");
for (var i = 0; i < oLis.length; i++) {
oLis[i].index = i;
oLis[i].onclick = function() {
for (var n = 0; n < oLis.length; n++) {
oLis[n].className = "";
oDivs[n].className = "hide";
}
this.className = "on";
oDivs[this.index].className = "";
}
};
}
</script>
</head>
<body>
<div id="tabs">
<ul>
<li class="on">北京</li>
<li class="off">上海</li>
<li class="off">南京</li>
</ul>
<div id="firstPag" class="show">
<a href="#">275万购昌平邻铁三居 总价20万买一居</a>
</div>
<div id="secondPag" class="hide">
<a href="#">40平出租屋大改造 美少女的混搭小窝</a>
</div>
<div id="thirdPag" class="hide">
<a href="#">通州豪华3居260万 二环稀缺2居250w甩</a>
</div>
</div>
</body>
</html>
-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 100px auto;
overflow: hidden;
}
.hd {
height: 45px;
}
.hd span {
display: inline-block;
width: 90px;
background-color: pink;
line-height: 45px;
text-align: center;
cursor: pointer;
}
.hd span.current {
background-color: purple;
}
.bd li {
height: 255px;
background-color: purple;
display: none;
}
.bd li.current {
display: block;
}
</style>
</head>
<body>
<div class="box" id="box">
<div class="hd">
<span class="current">体育</span>
<span>娱乐</span>
<span>新闻</span>
<span>综合</span>
</div>
<div class="bd">
<ul>
<li class="current">我是体育模块</li>
<li>我是娱乐模块</li>
<li>我是新闻模块</li>
<li>我是综合模块</li>
</ul>
</div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box = my$("box");
//获取的是里面的第一个div
var hd = box.getElementsByTagName("div")[0];
//获取的是里面的第二个div
var bd = box.getElementsByTagName("div")[1];
//获取所有的li标签
var list = bd.getElementsByTagName("li"); //=================================
//获取所有的span标签
var spans = hd.getElementsByTagName("span");
//循环遍历的方式,添加点击事件
for (var i = 0; i < spans.length; i++) {
//在点击之前就把索引保存在span标签中
spans[i].setAttribute("index", i); //================================
spans[i].onclick = function() {
//第一件事,所有的span的类样式全部移除
for (var j = 0; j < spans.length; j++) {
spans[j].removeAttribute("class");
}
//第二件事,当前被点击的span应用类样式
this.className = "current";
//span被点击的时候获取存储的索引值
//alert(this.getAttribute("index"));
var num = this.getAttribute("index"); //==============================
//获取所有的li标签,每个li标签先全部隐藏
for (var k = 0; k < list.length; k++) {
list[k].removeAttribute("class");
}
//当前被点击的span对应的li标签显示
list[num].className = "current";
};
}
</script>
</body>
</html>