div 内容点击切换的小技巧

    xiaoxiao2025-04-13  9

    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");     });

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

    转载请注明原文地址: https://ju.6miu.com/read-1298036.html
    最新回复(0)