<div class="main-nav-3">
<ul>
<li class="cur">内饰专业清洁</li>
<li>皮革保湿养护</li>
<li>内饰杀菌除味</li>
<li>玻璃结晶镀膜</li>
<li>轮毂复新</li>
</ul>
</div>
<div class="neirong-box">
<div class="s-box">
<div class="text">
<span>内饰专业清洁</span>
</div>
<div class="img-boxs">
<div class="img-box">
<div class="box">
<img src="static/img/tese.jpg">
</div>
</div>
</div>
</div>
<div class="s-box">
<div class="text">
<span>皮革保湿养护</span>
</div>
<div class="img-boxs">
<div class="img-box">
<div class="box">
<img src="static/img/tese-2.jpg">
</div>
</div>
</div>
</div>
</div>
以下是js代码:
//内容随按钮变化而改变
$(function () {
$('.main-nav-3 li').click(function () {
$(this).addClass('cur').siblings().removeClass('cur');
$(".neirong-box .s-box").eq($(this).index()).show().siblings().hide();
})
})
addClass方法点击li标签时,把样式cur加到li标签中
removeClass方法点击别的li标签时,把样式cur移除
点哪个li标签.neirong-box .s-box类选择器中的内容就添加进去
网友评论