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 相关文章推荐
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
jQuery获取checkboxlist的value值的方法
Sep 27 Javascript
JQuery插件Marquee.js实现无缝滚动效果
Apr 26 Javascript
原生JavaScript实现AJAX、JSONP
Feb 07 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
微信小程序 两种为对象属性赋值的方式详解
Feb 23 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 Javascript
angularJs中json数据转换与本地存储的实例
Oct 08 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
May 14 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
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
解析php5配置使用pdo
2013/07/03 PHP
php小技巧之过滤ascii控制字符
2014/05/14 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
laravel5.1框架基础之Blade模板继承简单使用方法分析
2019/09/05 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
显示js对象所有属性和方法的函数
2009/10/16 Javascript
jQuery创建自己的插件(自定义插件)的方法
2010/06/10 Javascript
JavaScript中的细节分析
2012/06/30 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
使用console进行性能测试
2015/04/27 Javascript
jQuery选择器用法实例详解
2015/12/17 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
Python解决鸡兔同笼问题的方法
2014/12/20 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
win与linux系统中python requests 安装
2016/12/04 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
浅谈Python中的字符串
2020/06/10 Python
德国购买门票网站:ADticket.de
2019/10/31 全球购物
应届大学生求职的自我评价
2013/11/17 职场文书
大学毕业生通用自我评价
2014/01/05 职场文书
小学毕业感言500字
2014/02/28 职场文书
建筑公司员工自我鉴定
2014/04/08 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
介绍信的格式
2015/01/30 职场文书
《秋天的图画》教学反思
2016/02/19 职场文书