选项卡切换在页面中比较常见，这里是我利用js闭包还有setTimeout定时器实现的一个比较实用的选项卡功能。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>tab选项卡</title>

     <style>

         *{margin:0;padding:0;font-size: 12px;}

         body{background: #fff;}

         ul{list-style: none;}

         .none{display:none;}

         .tab{width:598px;height:135px;margin:20px auto;border:1px #e8e8e8 solid;}

         .tag-box{height:30px;position: relative;overflow: hidden;}

         .tag{position:absolute;left:-1px;width:600px;height:30px;background: #f7f7f7;}

         .tag li{float:left;width:118px;padding:0 1px;height:29px;line-height: 29px;text-align: center;color:#666;border-bottom:1px #e8e8e8 solid;cursor: pointer;}

         .tag li.on{padding:0;background: #fff;font-weight: bold;border-left:1px #e8e8e8 solid;border-right:1px #e8e8e8 solid;border-bottom:1px #fff solid;}

         .cons li{float:left;width:250px;line-height: 15px;margin:20px 0 0 45px;}

         .cons li a{color:#666;}

     </style>

     <script>

         function tab(){

             var tag = document.getElementById('tagBox').getElementsByTagName('li'),

             con =  document.getElementById('conBox').children,

             length = tag.length,

             i = 0,

             timer = null;

             for(; i<length; i++){

                 tag[i].onmouseover = (function(i){

                     return function(){

                         timer = setTimeout(function(){

                             for(var j=0; j<length; j++){

                                 tag[j].className = '';

                                 con[j].style.display = 'none';

                                 //i === j ? (tag[i].className = 'on',con[i].style.display = 'block') : (tag[j].className = '',con[j].style.display = 'none'); //利用三元运算符也可以

                             }

                             tag[i].className = 'on';

                             con[i].style.display = 'block';

                         },200)

                     }

                 })(i);

                 tag[i].onmouseout = function(){

                     clearTimeout(timer);

                     time = null;

                 }

             }

         };

         window.onload = tab;

     </script>

 </head>

 <body>

     <div class="tab">

         <div class="tag-box">

             <ul class="tag" id="tagBox">

                 <li class="on">公告</li>

                 <li>日志</li>

                 <li>天气</li>

                 <li>游戏</li>

                 <li>体育</li>

             </ul>

         </div>

         <div class="con" id="conBox">

             <ul class="cons">

                 <li><a href="javascript:;">为什么世界那么大？</a></li>

                 <li><a href="javascript:;">为什么世界那么大？</a></li>

                 <li><a href="javascript:;">为什么世界那么大？</a></li>

                 <li><a href="javascript:;">为什么世界那么大？</a></li>

             </ul>

             <ul class="cons none">

                 <li><a href="javascript:;">今天没有出去玩</a></li>

                 <li><a href="javascript:;">今天没有出去玩</a></li>

                 <li><a href="javascript:;">今天没有出去玩</a></li>

                 <li><a href="javascript:;">今天没有出去玩</a></li>

             </ul>

             <ul class="cons none">

                 <li><a href="javascript:;">万里无云</a></li>

                 <li><a href="javascript:;">万里无云</a></li>

                 <li><a href="javascript:;">万里无云</a></li>

                 <li><a href="javascript:;">万里无云</a></li>

             </ul>

             <ul class="cons none">

                 <li><a href="javascript:;">地下城与勇士</a></li>

                 <li><a href="javascript:;">地下城与勇士</a></li>

                 <li><a href="javascript:;">地下城与勇士</a></li>

                 <li><a href="javascript:;">地下城与勇士</a></li>

             </ul>

             <ul class="cons none">

                 <li><a href="javascript:;">NBA全明星赛</a></li>

                 <li><a href="javascript:;">NBA全明星赛</a></li>

                 <li><a href="javascript:;">NBA全明星赛</a></li>

                 <li><a href="javascript:;">NBA全明星赛</a></li>

             </ul>

         </div>

     </div>

 </body>

 </html>

js选项卡切换效果的更多相关文章

  1. 用html+css+js实现选项卡切换效果

    文章转载自:http://tongling.github.io/JSCards/ 用html+css+js实现选项卡切换效果 使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材 ...

  2. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  3. JS实现选项卡切换效果

    1.在网页制作过程中,我们经常会用到选项卡切换效果,它能够让我们的网页在交互和布局上都能得到提升 原理:在布局好选项卡的HTML结构后,我们可以看的出来,选项卡实际上是三个选项卡标头和三个对应的版块, ...

  4. 使用jquery实现选项卡切换效果

    几张简陋的框架效果图 页面加载时: 选项卡操作后: css样式: <style type="text/css"> *{margin:0px;padding:0px;} ...

  5. [前端] html+css+javascript 实现选项卡切换效果

    用html+css+js实现选项卡切换效果使用之前学过的综合知识,实现一个新闻门户网站上的常见选项卡效果: 文字素材:房产: 275万购昌平邻铁三居 总价20万买一居 200万内购五环三居 140万安 ...

  6. vue实现选项卡切换效果

    效果如下: 说明: 这里我使用的原理是利用vue中的v-show/显示隐藏指令,当为true的时候显示,为false的时候隐藏 1html代码: <head> <meta chars ...

  7. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  8. vue实现tab选项卡切换效果

    tab选项卡切换效果: 通过点击事件传入参数,然后通过v-show来进行切换显示 <template> <div class="box"> <div ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

随机推荐

  1. pcl1.7.2_vs2013_x64工程配置

    pcl1.7.2_vs2013_x64工程配置 C:\Program Files\PCL 1.7.2\include\pcl-1.7;C:\Program Files\PCL 1.7.2\3rdPar ...

  2. Eclipse安装与搭建Maven

    Maven的具体参考书可以看:<Maven实战> 下载maven可以到:http://maven.apache.org/ Maven的eclipse基本使用可以在这里看到:http://w ...

  3. linux 内核开发基础

    开发特点 不需要第三方库支持 使用GNU C 没有内存保护机制 杜绝浮点数 栈区固定 必须关注并发及同步 注意可移植性

  4. mysql的四种隔离级别

    一.READ UNCOMMITTED(未提交读) 在READ UNCOMMITTED级别,事务中的修改,即使未提交,对其他事务也都是可见的.事务可以读取未提交的数据,这也被称为脏读( Dirty RE ...

  5. python核心编程-第四章-习题

    1.身份.类型.值.其中,身份是每个对象的标识,与内存地址密切相关,可用id()返回:类型决定了对象可以保存什么类型的值,用type()函数.isinstance()函数可以得到对象的类型:值就是对象 ...

  6. Python httplib学习

    httplib是python中http协议的客户端实现,可以使用该模块与HTTP服务器进行交互. 如示例1: import httplib url = "www.126.com"c ...

  7. nginx上传模块nginx_upload_module和nginx_uploadprogress_module模块进度显示，如何传递GET参数等。

    ownload:http://www.grid.net.ru/nginx/download/nginx_upload_module-2.2.0.tar.gzconfigure and make : . ...

  8. hibernate中save,update,saveorupdate

    save在添加用的时候  不会出现索引机制(即遍历目录  效率最高)update在修改时候要遍历  不存在则会异常saveorupdate是优先遍历  如果不存在则创建(效率最低)

  9. 把自定义控件集成到Qt Designer中

    要想在Qt Designer中使用自定义控件,必须要使Qt Designer能够知道我们的自定义控件的存在.有两种方法可以把新自定义控件的信息通知给Qt Designer:“升级(promotion) ...

  10. ac命令根据/var/log/wtmp文件登录退出时间计算用户连接时间

    ac命令根据/var/log/wtmp文件登录退出时间计算用户连接时间