想起刚开始学js 的时候 会一个选项卡 感觉已经很厉害 给大家整理一段非常简单的选项卡
1.下面是css
.nav-tab{width: 100%;overflow: auto;} .nav-tab span{float: left;text-align: center; padding: 20px 0; display: inline-block;width: 33.33%;border-bottom: 2px solid #dce0e0; } .nav-tab .selected{color: #28A4B0;border-bottom: 2px solid #28A4B0; } .content{display: none} .content.active{display: block}
2.html
<div class="nav-tab"> <span class="selected">12</span> <span>34</span> <span>56</span> </div> <div> <div class="content active" style="width: 100%;height: 50px;background-color: pink">qwe</div> <div class="content" style="width: 100%;height: 50px;background-color: #fcffa9">asd</div> <div class="content" style="width: 100%;height: 50px;background-color: #ffccb2">asd</div> </div>
3.js
$(".nav-tab span").on("click",function(){ $(".content").eq($(this).index()).addClass("active").siblings().removeClass("active") $(this).addClass("selected").siblings().removeClass("selected"); })
4.解析：让显示的内容根据点击的索引改变显示的内容
5.注意：记得引入jquery哦
