选项卡切换在页面中比较常见，这里是我利用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. Oracle11g客户端安装及plsql配置

    1,项目使用的是oracle11g数据库,安装个客户端访问服务器. 到oracle官方下载: http://www.oracle.com/technology/global/cn/software/t ...

  2. Spring 注入数据源

    一.在项目中添加dataSource所用到的包 dbcp数据源所需包:     commons-dbcp.jar     commons-pool.jar C3P0数据源所需包:     c3p0-0 ...

  3. 仅当使用了列的列表 并且 identity_insert 为 on 时 才能在表 中为标识列指定显式值

    当 IDENTITY_INSERT 设置为 OFF 时,不能向表 'products' 中的标识列插入显式值.” 示例: 1.首先建立一个有标识列的表:CREATE TABLE products (i ...

  4. BZOJ 3368 约翰看山（扫描）O(N)

    这题,简直丧心病狂了. 大意是给你一个环上一些覆盖的区间,让你求总覆盖长度. 非常坑的点是这个区间因为是个环,所以可能逆时针给你,也可能顺时针给你,你特别要注意.那么区分顺时针和逆时针的方法 就是,题 ...

  5. js中邦定事件与解绑支持匿名函数

    和一个朋友讨论了一下,DOM2绑定方式都是有名的函数,匿名的处理起来有些麻烦,而且即使是有名的函数,在IE低版本的浏览器也是解除不掉的,this指向需要修改,着实费了一番功夫,这个是兼容ie低版本的, ...

  6. git基础命令

     git pull 更新git status 查看文件状态git add .添加所有git commit -a -m "xxxx" 提交git push 推送至服务器git dif ...

  7. PHP 表单防止刷新提交的方法

    当然,最直接的办法就是尽量不要使用自动提交的表单,然而,当我们需要网页主动post表单进行初始化时,就不得不面对这个问题了 -------------------------------------- ...

  8. 变量 - PHP手册笔记

    基础 PHP中的变量用一个美元符号后面跟变量名来表示.变量名是区分大小写的,并且出现中文可能也是合法的. 变量默认总是传值赋值.PHP也提供了另外一种方式给变量赋值:引用赋值.这意味着新的变量简单的引 ...

  9. c语言 列出-终止系统进程

    #include <stdio.h> #include "stdafx.h" #include <Windows.h> #include <strin ...

  10. angular 入门教程1

    使用angularjs也有一年之久了.从初识angularjs时的激动和兴奋到现在淡定的使用,这其中也是有不少的心酸(刚用的时候和各种js插件的配合使用快把我弄疯了). 细想起来.用MVVM的这种js ...