标签栏切换
HTML
<div class="box"><div class="tab-list"><ul><li>商品介绍</li><li>商品介绍</li><li>商品介绍</li><li>商品介绍</li><li>商品介绍</li></ul></div><div class="tab-icon"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div></div></div>
CSS
* {margin: 0;padding: 0;list-style: none;}.box {width: 700px;margin: 100px auto;}.tab-list>ul {border: 1px solid #000;background-color: gray;overflow: hidden;}.tab-list>ul>li {float: left;padding: 10px 30px;cursor: pointer;}.tab-icon {height: 300px;}.item {display: none;}.current {background-color: darkred;color: white;}//这是JQ后要添加的预定义类
JQ
$('.tab-list>ul>li').click(function () {var index = $(this).index();$(this).addClass('current').siblings().removeClass('current');$('.item').eq(index).show().siblings().hide();})
这个简单不多讲
导航栏下滑
效果图
HTML
<ul class="box"><li><a href="#">商品介绍</a><ul><li>1</li><li>1</li><li>1</li></ul></li><li><a href="#">商品介绍</a><ul><li>1</li><li>1</li><li>1</li></ul></li><li><a href="#">商品介绍</a><ul><li>1</li><li>1</li><li>1</li></ul></li><li><a href="#">商品介绍</a><ul><li>1</li><li>1</li><li>1</li></ul></li><li><a href="#">商品介绍</a><ul><li>1</li><li>1</li><li>1</li></ul></li></ul>
CSS
* {padding: 0;margin: 0;list-style: none;}.box {overflow: hidden;text-align: center;width: 45%;margin: 100px auto;}.box>li {float: left;}.box>li>a {display: inline-block;padding: 10px 30px;text-decoration: none;color: #000;}.box>li>ul {display: none;}.box>li>ul>li {width: 90%;padding: 1px;margin: 0 auto;border: 1px solid red;margin-top: -1px;}.current {background-color: teal;color: white;}
JQ
$('.box>li>a').hover(function () {$(this).addClass('current').parent("li").siblings().children('a').removeClass('current')$(this).next('ul').stop().slideToggle(200);})
这里加了个stop()方法
如果不加会出现
因为存在动画排队，你鼠标多次划过，他因为有过渡效果，完成时间慢，还是会完成全部才结束。
所以用到stop（）方法来解决，作用就是在动画完成之前停止动画效果，并且一定要放在动画方法的前面！
像之前的
$(this).next(‘ul’).stop().slideToggle(200);
而不是放在slideToggle方法后面，不然没有效果，相当于启动动画立刻停止了
