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来定位
Feb 20 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
深入浅析react native es6语法
Dec 09 Javascript
js前端解决跨域问题的8种方案(最新最全)
Nov 18 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
axios 处理 302 状态码的解决方法
Apr 10 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
JS实现网页端猜数字小游戏
Mar 06 Javascript
JavaScript中的Proxy对象
Nov 27 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
Laravel如何实现自动加载类
2019/10/14 PHP
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
js 加密压缩出现bug解决方案
2014/11/25 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
js从外部获取图片的实现方法
2016/08/05 Javascript
Javascript使用function创建类的两种方法(推荐)
2016/11/19 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
2017/09/19 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python中使用logging和traceback模块记录日志和跟踪异常
2019/04/09 Python
详解Python静态网页爬取获取高清壁纸
2019/04/23 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Python for i in range ()用法详解
2020/09/18 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
椰子猫砂:CatSpot
2018/08/27 全球购物
请描述一下”is a”关系和”has a”关系
2015/02/03 面试题
班会关于环保演讲稿
2013/12/29 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
球队口号
2014/06/18 职场文书
2014法院干警廉洁警示教育思想汇报
2014/09/13 职场文书
大学生自荐材料范文
2014/12/30 职场文书
Python干货实战之八音符酱小游戏全过程详解
2021/10/24 Python
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript