js实现tab切换效果实例


Posted in Javascript onSeptember 16, 2015

直接先来个真相吧:

js实现tab切换效果实例 

【HTML代码】

<div id="menu">
<!--tag标题-->
  <ul id="nav">
    <li><a href="#" class="selected">tab1</a></li>
    <li><a href="#" class="">tab2</a></li>
    <li><a href="#" class="">tab3</a></li>
    <div style="clear:both"></div>
  </ul>
<!--二级菜单-->
  <div id="menu_con">
    <div class="tag" style="display:block">
      这是TAB切换效果区域1
     </div> 
    <div class="tag" style="display:none">
      这是TAB切换效果区域2  
     </div> 
    <div class="tag" style="display:none">
      这是TAB切换效果区域3
    </div> 
</div>
</div>

【js】

/**
 * tabs
 * @author  橡树小屋
 */
var tabs=function(){
  function tag(name,elem){
    return (elem||document).getElementsByTagName(name);
  }
  //获得相应ID的元素
  function id(name){
    return document.getElementById(name);
  }
  function first(elem){
    elem=elem.firstChild;
    return elem&&elem.nodeType==1? elem:next(elem);
  }
  function next(elem){
    do{
      elem=elem.nextSibling; 
    }while(
      elem&&elem.nodeType!=1 
    )
    return elem;
  }
  return {
    set:function(elemId,tabId){
      var elem=tag("li",id(elemId));
      var tabs=tag("div",id(tabId));
      var listNum=elem.length;
      var tabNum=tabs.length;
      for(var i=0;i<listNum;i++){
          elem[i].onclick=(function(i){
            return function(){
              for(var j=0;j<tabNum;j++){
                if(i==j){
                  tabs[j].style.display="block";
                  //alert(elem[j].firstChild);
                  elem[j].firstChild.className="selected";
                }
                else{
                  tabs[j].style.display="none";
                  elem[j].firstChild.className="";
                }
              }
            }
          })(i)
      }
    }
  }
}();
window.onload=function(){
  tabs.set("nav","menu_con");
}

【CSS】

body{ background:#FFF;}
a{color:#585858}
#menu{width:360px;}
/*-------------------nav样式----------------------*/
#menu #nav {display:block;width:100%;padding:0;margin:0;list-style:none;
 background:url(../images/bg.gif)}
#menu #nav li {float:left;width:120px;}
#menu #nav li a {display:block;line-height:27px;text-decoration:none;padding:0 0 0 5px; text-align:center}
 
/*-------------------列表标题样式----------------------*/
#menu_con{ width:358px; height:135px;border:1px solid #BF9660; border-top:none}
.selected{background:url(../images/tag_bg.gif);}
.clear{ clear:both}

调用方法:

tabs.set("nav","menu_con");

代码下载 点击这里

这个实例只是简单实现了点击切换的效果,还有许多功能可以添加,大家一起动手实践一下吧。

Javascript 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
javascript查询字符串参数的方法
Jan 28 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
JS解决iframe之间通信和自适应高度的问题
Aug 24 Javascript
利用Jquery队列实现根据输入数量显示的动画
Sep 01 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
Jan 24 Javascript
Node.js系列之发起get/post请求(2)
Aug 30 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
使用next.js开发网址缩短服务的方法
Jun 17 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 #Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 #Javascript
JS实现光滑展开合拢的菜单效果代码
Sep 16 #Javascript
jQuery实现两款有动画功能的导航菜单代码
Sep 16 #Javascript
javascript中的previousSibling和nextSibling的正确用法
Sep 16 #Javascript
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
Sep 16 #Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 #Javascript
You might like
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
php微信公众平台示例代码分析(二)
2016/12/06 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
laravel数据库查询结果自动转数组修改实例
2021/02/27 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
为jQuery.Treeview添加右键菜单的实现代码
2010/10/22 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
javascript面向对象之定义成员方法实例分析
2015/01/13 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
基于JS实现textarea中获取动态剩余字数的方法
2016/05/25 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
Bootstrap的fileinput插件实现多文件上传的方法
2016/09/05 Javascript
纯javascript版日历控件
2016/11/24 Javascript
JS奇技之利用scroll来监听resize详解
2017/06/15 Javascript
vue2.0全局组件之pdf详解
2017/06/26 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
JS Web Flex弹性盒子模型代码实例
2020/03/10 Javascript
Vue项目开发常见问题和解决方案总结
2020/09/11 Javascript
Python的Tornado框架实现异步非阻塞访问数据库的示例
2016/06/30 Python
Python中的time模块与datetime模块用法总结
2016/06/30 Python
python检测服务器端口代码实例
2019/08/31 Python
jupyter notebook指定启动目录的方法
2021/03/02 Python
教师队伍管理制度
2014/01/14 职场文书
大课间活动实施方案
2014/03/06 职场文书
高三上学期学习自我评价
2014/04/23 职场文书
活动总结模板
2014/05/09 职场文书
求职信的正确写法
2014/07/10 职场文书
廉政教育的心得体会
2014/09/01 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
SQLServer之常用函数总结详解
2021/08/30 SQL Server
Python数据结构之队列详解
2022/03/21 Python