做为一名linux运维+PHP开发，对前端只是一知半解，但还是有兴趣的。
jquery是好东西，可是自己不熟，半桶水写原生JS，慢慢遇到浏览器各种兼容之后，才发现jquery的基本不用考虑这些。
这次是倒腾一个选项卡嵌套二级选项卡的功能，看着手册来弄。
效果如下：
比如选项第一级是 明星、作家等，
如果点击明星之后，第二级是A-Z的字母，
点击A字母后，选项卡内容就都是A开头名字的明星。
选项卡标题span和和选项卡内容理论上不限数量 自由添加，但数量得一致，需要保持标题内容的一一对应，JS是自动按顺序做关联关系的，这样的好处是增加内容很方便。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
</head>
<style>
.tab-shw2019 p{ padding: 1px; margin-top: 1px;;}
.tab-shw2019 p a{ text-decoration: none;; color: #8e8e8e;}
.tab-shw2019 .tag-content div,.tab-shw2019 .tag-content div dd{display: none;}
.tab-shw2019 .tag-title{ width: 100%; height: 35px; display: block; overflow: hidden; border-bottom: 1px solid #cccccc; }
.tab-shw2019 .tag-title span{float:left; font-size: 16px; padding-left: 5px; padding-right: 5px; height: 32px; line-height: 32px; cursor: pointer; color: #333333;}
.tab-shw2019 .tag-title span.current,.tab-shw2019 .tag-content dt span.current{ background-color: #13df80; color: #FFFFFF; display: block;}
.tab-shw2019 .tag-content dl{ margin: 0px; padding: 0px;}
.tab-shw2019 .tag-content dt,.tab-shw2019 .tag-content dd {width: 100%; height: 30px; display: block; margin: 0px; padding: 0px;; overflow: hidden;}
.tab-shw2019 .tag-content dt span{float:left; color: #CCCCCC; border: 1px solid #efefef; font-size: 14px; margin: 5px;; padding-left: 5px; padding-right: 5px; height: 22px; line-height: 22px; cursor: pointer;}
</style>
<body>
<div class="tab-shw2019">
<div class="tag-title">
<span>明星</span>
<span>作家</span>
<span>工程师</span>
<span>教师</span>
<span>驾驶员</span>
<span>科学家</span>
<span>创业者</span>
</div>
<div class="tag-content">
<div>
<dl>
<dt><span>A</span><span>B</span><span>C</span></dt>
<dd><p><a href="#">阿雅</a> <a href="#">阿杜</a> <a href="#">阿里郎</a></p></dd>
<dd>BBB</dd>
<dd>CCC</dd>
</dl>
</div>
<div><p><a href="#">CCAV</a> <a href="#">CCSV</a> <a href="#">ssAV</a></p></div>
<div>3</div>
<div>4</div>
<div>
<dl>
<dt><span>A1</span><span>B1</span><span>C1</span></dt>
<dd>AAA111</dd>
<dd>BBB111</dd>
<dd>CCC111</dd>
</dl>
</div>
<div>6</div>
<div>7</div>
</div>
</div>
<script>
(function(){
$(".tag-title").children("span").each(function(key,value){
$(value).on("click",function(){
$(".tag-title").children("span").removeClass("current");
$(value).addClass("current");
$(".tag-content").children("div").css("display","none");
$(".tag-content").children("div").eq(key).css("display","inline");
});
});
$(".tag-content").find("dl").each(
function(key,value){
$(value).find("span").each(function(key2,value2){
$(value2).on("click",function(){
$(value).find("span").removeClass("current");
$(value2).addClass("current");
$(value).find("dd").each(function($key3,value3){
$(value3).css("display","none");
});
$(value).find("dd").eq(key2).css("display","inline");
console.log(key);
});
});
}
);
//选项卡第一项自动展开
$(".tag-title").children("span").first().click();
$(".tag-content").find("dl").first().find("span").first().click();
})();
</script>
</body>
</html>
标签: jquery
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：https://www.isres.com/fenxiang/237.html