选项卡切换在页面中比较常见，这里是我利用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. IT运维外包甩不掉的包袱

    对一个企业的IT信息部门来说,保证IT系统的安全.稳定和可靠运行是IT部门义不容辞的职责,但IT系统的安全.稳定和可靠是相对的,得看企业IT投入和ROI.现在企业的IT系统运维面临着多重压力:一方面是 ...

  2. github Permission denied (publickey)解决办法

    想要玩玩git,参考了网友懒惰之计的一篇Blog<github:如何获取项目源代码 >,按部就班完成了所有的步骤的, 可在测试的时候,遇到了问题,总是报错”github Permissio ...

  3. celery 使用multiprocessing 问题记录

    报错: [2013-11-29 14:27:48,297: ERROR/MainProcess] Task app.add[e5d184c0-471f-4fc4-804c-f760178d4847] ...

  4. 我用爬虫一天时间“偷了”知乎一百万用户，只为证明PHP是世界上最好的语言

    我用爬虫一天时间“偷了”知乎一百万用户,只为证明PHP是世界上最好的语言 2015-08-06 猿圈 我用爬虫一天时间“偷了”知乎一百万用户 只为证明PHP是世界上最好的语言 看了不少朋友圈里推荐的P ...

  5. Android TextView 字符串展示不同大小文字

    用Spannable字符串实现: String s= "Hello Everyone"; SpannableString ss1= new SpannableString(s); ...

  6. 异常处理 - PHP手册笔记

    PHP代码中所产生的异常可被throw语句抛出,并被catch语句捕获.需要进行异常处理的代码都必须放入try代码块内,每一个try至少要有一个与之对应的catch.当一个异常被抛出时,所在代码块后面 ...

  7. python交换两个变量的值，一句代码搞定

    a = 10 b = 20 # 不需要中间变量,一步搞定 a, b = b, a

  8. （2012年旧文）纪念史蒂夫乔布斯---IT界的普罗米修斯

    谈苹果与乔布斯系列一  IT界的普罗米修斯 纪念PC界的先驱 史蒂夫乔布斯 2012-4-5 清明节,纪念IT时代的开创人—伟大的史蒂夫 乔布斯. 没有乔布斯,计算机还是属于一群科技人士的工具,没有漂 ...

  9. JVM GC之一找出不可达对象并回收

    JAVA运行时数据区域 1.程序计数器:当前线程所执行的字节码的行号指示器.一个处理器只会执行一条线程中的指令,为了线程切换后能回复到正确的执行位置,所以每条线程都需要一个独立的计数器.各条线程之间互 ...

  10. Nginx 配置指令的执行顺序（九）

    紧接在 server-rewrite 阶段后边的是 find-config 阶段.这个阶段并不支持 Nginx 模块注册处理程序,而是由 Nginx 核心来完成当前请求与 location 配置块之间 ...