div 内容点击切换的小技巧

 

div 内容点击切换的小技巧

   对于内容区的切换，假如是一个，二个，写2次就可以了，假如像sina里面的内容区切换多的时候又改怎么写呢，如果是10 个，我是吧上班要写10遍呢，这明显的不是我们要求的。所以我推荐一个小技巧。

      就是在生成的内容区的div 的切换导航加个自定义属性 如：

     <ul>

          <li class="li" index="0">

                <div class="div" style="display:none">li1</div>

          </li>

          <li class="li" index="1">

                <div class="div" style="display:none">li1</div>

          </li>

          <li class="li" index="2">

                <div class="div" style="display:none">li1</div>

          </li>

          <li class="li" index="3">

                <div  class="div" style="display:none">li1</div>

          </li>

    </ul>

 好了 前期工作做好了 那么我们怎么实现呢

JS 部分如下：

     $("ul li").click(function(){
        var i = parseInt($(this).attr("index"));
        var div = $(".div").eq(i);
        div.css("display","block").siblings().css("display","none");
    });

   这样 就可以轻松完成导航切换内容。也不限制数量。。