对于内容区的切换,假如是一个,二个,写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 class="li" index="2">
<div class="div" style="display:none">li1</div>
<li class="li" index="3">
<div class="div" style="display:none">li1</div>
</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");
});
这样 就可以轻松完成导航切换内容。也不限制数量。。
本文介绍了一种使用自定义属性简化多个内容区切换的方法。通过在导航元素中添加自定义属性并利用JavaScript进行处理,可以轻松地实现内容区的动态切换,且不限制数量。
817

被折叠的 条评论
为什么被折叠?



