jquery简单实现tab选项卡效果--转

Posted 2020-08-28 ghfjj

html：
<ul class="tab">
    <li>最新</li>
    <li class="cur">热门</li>
    <li>新闻</li>
</ul>
<div>11</div>
<div class="on">22</div>
<div>33</div>

js:
  $(document).ready(function(){ 
    $(".tab li").click(function(){ 
        $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass(‘cur‘);
        $("div").hide().eq($(this).index()).show();
       //另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass(‘on‘);     });
 });