选项卡切换在页面中比较常见，这里是我利用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. C与C++

    有幸在某网站发现这篇文章,读罢,觉得蛮有道理,发来大家一起共勉之! 总是被同学们问到,如何学习C和C++才不茫然,才不是乱学,想了一下,这里给出一个总的回复. 一家之言,欢迎拍砖哈. 1.可以考虑先学 ...

  2. 从汇编看c++成员函数指针(三)

    前面的从汇编看c++中成员函数指针(一)和从汇编看c++成员函数指针(二)讨论的要么是单一类,要么是普通的多重继承,没有讨论虚拟继承,下面就来看一看,当引入虚拟继承之后,成员函数指针会有什么变化. 下 ...

  3. Python成长之路第二篇（1）_数据类型内置函数用法

    数据类型内置函数用法int 关于内置方法是非常的多这里呢做了一下总结 (1)__abs__(...)返回x的绝对值 #返回x的绝对值!!!都是双下划线 x.__abs__() <==> a ...

  4. 定义#define

                                                    定义符号常量   当我们不止一次用到某个符号常量时,常选择对符号变量进行定义,这样就能当成一般常量来用. ...

  5. BootstrapTable+KnockoutJS实现增删改查解决方案

    BootstrapTable+KnockoutJS实现增删改查解决方案 前言:上篇介绍了下ko增删改查的封装,确实节省了大量的js代码.博主是一个喜欢偷懒的人,总觉得这些基础的增删改查效果能不能通过一 ...

  6. how to use http.Agent in node.js

    Actually now that I look at the Agent code, it looks like it sets maxSockets on a per domain basis i ...

  7. Sql Server专题一：索引（上）

    写在前面的废话:索引问题已经是老生常谈的问题,虽然被经常说起,但作为我来说,至今没有用过索引(很可怕吧),我作为MS-BI实施工程师居然没用过索引,说话自然没底气.之前对索引的了解停留在“知道”的地步 ...

  8. logstash 使用grok正则解析日志

    http://xiaorui.cc/2015/01/27/logstash%E4%BD%BF%E7%94%A8grok%E6%AD%A3%E5%88%99%E8%A7%A3%E6%9E%90%E6%9 ...

  9. mfc窗口，父窗口parentwindow，所有者窗口ownerwindow 区别

    一. parent:创建者,owner:所有者 小玉的父母生下小玉,养到8岁,卖给贾府当丫头小玉的父母是parent,贾府是owner 二. 1.Pop-up窗口: 一个弹出窗口是必须具有WS_POP ...

  10. Java导出excel并下载功能

    我们使用的导出并下载功能是利用一个插件叫POI的插件提供的导出功能,很实用:首先先导入Jar包: Jar包下载地址:http://poi.apache.org/   官方文档地址:http://poi ...