Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > 网页特效 > 原生JS特效:TAB选项卡切换
隐藏/显示侧边栏

原生JS特效:TAB选项卡切换

2013-10-10 10:43    来源:http://www.cgner.com    责任编辑:程管网    字号【

常用的页面效果有弹出层效果,无缝滚动效果,选项卡切换效果,接下来与大家分享一款自己用原生javascript写的选项卡切换效果,感兴趣的朋友可以参考下哈

Javascript代码如下
<script type="text/javascript">
window.onload=function () {
var oTitle = document.getElementById('title');
var aSpan = oTitle.getElementsByTagName('span');
var oCon = document.getElementById('con');
var aUl = oCon.getElementsByTagName('ul');
var i = 0;

for(i=0; i<aSpan.length; i++) {
  var index = 0;
  aSpan[i].index = aUl[i].index = i;
 
  aSpan[i].onclick = function () {
   for(i=0; i<aSpan.length; i++) {
    aSpan[i].className = '';
    aUl[i].className = '';
   }
  
   this.className = 'on';
   aUl[this.index].className = 'on';
  };
}
};
</script>

本案例的演示地址单击此处: DEMO演示地址

本案例的演示地址单击此处

更多
Tags 标签:
责任编辑:程管网
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |