现在很多网页都有TAB滑动效果,大部分是应用了jQuery技术,优点就是效果很炫,但是其实原始的JS也是可以实现的,其实很简单;就是利用JS的特性,写个函数控制就好了,缺点就是假如是数据动态调用的话需要很强的逻辑思维去控制好输出代码:
下面我来贴出一段JS控制的代码函数:
//author:xycms
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"cur":"";
con.style.display=i==cursel?"block":"none";
}
}
如何应用呢?
看实例:
<Li class="cur" id="tab1" onmousemove="setTab(tab,1,2)">测试栏目一</li>
<Li id="tab2" onmousemove="setTab(tab,2,2)">测试栏目一</li>
栏目CSS需要您去精准控制,cur是默认选中状态,需要您写样式:
内容层就这样写:
<ul id="con_tab_1">默认显示内容</ul>
<ul id="con_tab_2" style="display:none;">默认不显示</ul>
OK,这样就好了,我只是简单写了思路,具体还是根据具体需求写样式,这样才比较美观!