共计 1324 个字符，预计需要花费 4 分钟才能阅读完成。
<!DOCTYPE html><html lang=”en”><head>
<meta charset=”UTF-8″>
<title> 选项卡 </title>
<style type=”text/css”>
* {
margin: 0;
padding: 0
}
#com_title li {
width: 100px;
height: 30px;
display: inline-block;
border: 1px solid #000;
}
.main {
display: none;
}
.on {
display: block;
background: #ccc;
}
.onmain {
display: block;
}
#com_title1 li {
width: 100px;
height: 30px;
display: inline-block;
border: 1px solid #d58512;
}
.main1 {
display: none;
}
.on1 {
display: block;
background: #dd514c;
}
.onmain1 {
display: block;
}
</style>
</head><body><ul id=”com_title”>
<li class=”on”><a> 动态 </a></li>
<li><a> 标题 </a></li>
</ul><div class=”main onmain”>111111</div><div class=”main”>222222</div>
<ul id=”com_title1″>
<li class=”on1″><a> 动态 2 </a></li>
<li><a> 标题 2 </a></li>
</ul><div class=”main1 onmain1″> 动态 2 动态 2 </div><div class=”main1″> 标题 2 标题 2 </div>
</body></html><script src=’js/zepto.js’></script><script>
// $(“#com_title li”).on(“click”, function () {
// let index = $(this).index();
// $(this).addClass(“on”).siblings().removeClass(“on”);
// $(“.main “).eq(index).addClass(“onmain”).siblings().removeClass(“onmain”);
// })
function tabChange(titli, maindiv, onli, ondiv) {
$(titli).on(“click”, function () {
let index = $(this).index();
$(this).addClass(onli).siblings().removeClass(onli);
$(maindiv).eq(index).addClass(ondiv).siblings().removeClass(ondiv);
})
}
tabChange(‘#com_title li’, ‘.main’, ‘on’, ‘onmain’);
tabChange(‘#com_title1 li’, ‘.main1’, ‘on1’, ‘onmain1’);
</script>
