纯JavaScript代码,实现网页内容TAB滑动/点击效果

41 篇文章 0 订阅

现在很多网页都有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,这样就好了,我只是简单写了思路,具体还是根据具体需求写样式,这样才比较美观!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

XYCMS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值