目录
案例一:
点击上方的导航栏,导航栏的背景颜色发生改变,文字也发生改变,下方的主内容发生相应的改变
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style-type: none;
}
.tab{
width: 850px;
margin: 100px auto;
}
.tab_list{
height: 39px;
border: 1px solid rgb(216, 216, 216);
background-color: #f1f1f1;
}
.tab_list li{
float: left;
height: 39px;
line-height: 39px;
padding: 0 35px;
text-align: center;
cursor: pointer;/*鼠标放置显示手指状态*/
}
.tab_list .current{
background-color: #c81623;
color: #fff;
}
.item{
display: none;
}
</style>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价(50000)</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">商品简介的内容</div>
<div class="item">规格与包装内容</div>