选项卡切换在页面中比较常见，这里是我利用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. 将已有项目导入Gitlab

    登陆GitLab,创建添加项目. 写入项目的基本信息,包括名称.描述.权限等等. cd existing_folder git init git remote add origin git@10.10 ...

  2. HDU 2157 - How many ways??

    给图,图中任意可达的两点间步数为1 问从图中A点走到B点步数为k的有几条路 祭出离散数学图论那章中的 邻接矩阵A. 设S=Ak 则 S[a][b] 为 a到b,步数为k的不同路的条数 剩下的就是矩阵快 ...

  3. Marineking wilyin

    A - Marineking wilyin Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Ot ...

  4. 变形课--hdu1181

    变形课 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/65536 K (Java/Others)Total Submis ...

  5. HDU1043 Eight(BFS)

    Eight(South Central USA 1998) Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d & ...

  6. MYSQL 提取时间中的信息的 4 方法

    方法 1. year(),month(),day() 方法 2. dayofweek(),dayofmonth(),dayofyear(); 方法 3. hour(),minute(),second( ...

  7. android Xml生成一条细线，以及获取屏幕宽度和高度

    <View android:layout_width="match_parent" android:layout_height="2dip" androi ...

  8. shell基础——字符串连接

    #!/bin/sh str1="hello" str2="world" echo str1=$str1, str2=$str2 strconn1=$str1$s ...

  9. HeadFirst设计模式读书笔记(5)-单例模式

    单例模式:确保一个类只有一个实例,并提供一个全局访问点. 应用场景:数据库连接.线程池.缓存.对话框.处理偏好设置.注册表的对象.日志对象.充当打印机.显卡等设备的驱动程序对象.任务管理器.网站的计数 ...

  10. 忽然有一种感觉：云存储必须从系统级定制，所以必须对Linux相当熟悉。Windows下开发软件的模式已经过时了

    看了诸多招聘帖子以后的感觉- 工作内容: .存储相关产品的设计.开发和维护. .Linux系统应用程序研发. .主流Linux内核文件系统研发. .自动化测试框架和工具的研发. 职位要求: .计算机相 ...