这次用jq写的tabs其实很简单,代码只有两行,最主要的还是css上花了不少时间
eg:
<div class="tab-wrap">
<div id="tab-title" class="com-tab-title">
<h3><span class="tab-1 current">菜单1</span><span class="tab-2">菜单2</span><span class="tab-3">菜单3</span></h3>
</div>
<div id="tab-content" class="com-tab-cont">
<div class="tab-1">这是内容1</div>
<div class="tab-2 hide">这是内容2</div>
<div class="tab-3 hide">这是内容3</div>
</div>
</div>
本来在<span class="tab-1 current">菜单1</span>这边用的是ID的,后来因为动态给span加上class,某些属性不起作用,所以就改成了现在的这种方式。
造成某些属性不起的作用,经本人测试,得出以下结论:
ID,class的优先级关系
#id{border:1px red solid;}动态加上.class{border-top:none;}时一直没有效果,后来改成:
#id{} .class{border-top:1px red solid;}动态添加就有效果了!!
记录交流,如有错误,请指正!!