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 相关文章推荐
jquery中this的使用说明
Sep 06 Javascript
基于jQuery的倒计时插件代码
May 07 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
Jul 31 Javascript
Table冻结表头示例代码
Aug 20 Javascript
jQuery中closest和parents的区别分析
May 07 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
Aug 08 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
详解webpack+express多页站点开发
Dec 22 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
JS实现头条新闻的经典轮播图效果示例
Jan 30 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
php MessagePack介绍
2013/10/06 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
jquery的ajax请求全面了解
2013/03/20 Javascript
jQuery回车实现登录简单实现
2013/08/20 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
jQuery遍历json的方法分析
2016/04/16 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
express 项目分层实践详解
2018/12/10 Javascript
JavaScript之实现一个简单的Vue示例
2019/01/17 Javascript
微信小程序如何获取地址
2019/12/24 Javascript
JavaScript进阶(一)变量声明提升实例分析
2020/05/09 Javascript
python端口扫描系统实现方法
2014/11/19 Python
Python实现把数字转换成中文
2015/06/29 Python
Python利用IPython提高开发效率
2016/08/10 Python
Python编程实现输入某年某月某日计算出这一天是该年第几天的方法
2017/04/18 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Django框架静态文件使用/中间件/禁用ip功能实例详解
2019/07/22 Python
django一对多模型以及如何在前端实现详解
2019/07/24 Python
恶意软件的定义
2014/11/12 面试题
区域销售经理岗位职责
2013/12/10 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
个人廉政承诺书
2015/04/28 职场文书
公安机关起诉意见书
2015/05/20 职场文书
毕业实习感受与体会
2015/05/26 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
Django使用channels + websocket打造在线聊天室
2021/05/20 Python
Python办公自动化PPT批量转换操作
2021/09/15 Python
Nginx性能优化之Gzip压缩设置详解(最大程度提高页面打开速度)
2022/02/12 Servers