在网页开发中，常常会遇见很多Tab切换，Tab切换增加网页浏览的舒适性，对于开发人员特别常见，本文使用JS实现tab切换效果，仅对学习中遇到的知识点做一个总结。

效果图如下：

   

实现思路：

1.首先使用HTML和CSS构建静态网页如上，标题使用ul-li标签，有浮动，主体使用四个大小一样的盒子，不添加JS时候，盒子竖直排列（很丑很丑）

2.添加JS代码

　　2.1 首先实现标题的Tab效果

　　　　2.1.1获取所有的li元素，注册鼠标进入事件，在鼠标进入事件中，清除所有的li元素样式，然后给当前li元素添加样式

　　　　2.1.2在注册事件前，给所有的li元素通过setAttribute()方法给li挨个添加index属性，记录标签的序号，方便和主体div对应

　　2.2 实现所有的主体模块Tab效果

　　　　2.2.1 获取所有的主体DIV，与标签进行绑定，通过getAttribute()方法获得当前标签的索引，通过该索引得到DIV集合中与标签对应的div

代码如下：

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style>

         *{

             padding: 0px;

             margin: 0px;

         }

         /* 总体大盒子 */

         #box{

             width: 400px;

             height: 300px;

             border: 1px solid gray;

             margin: 100px auto auto;

         }

         /* 大盒子中头部小盒子ul */

         #hd{

             height: 45px;

         }

         /* 小盒子ul中li标签 */

         #hd li{

             height: 45px;

             display: inline-block;

             line-height: 45px;

             width: 98px;

             text-align: center;

             border: 1px solid gray;

             float: left;

             list-style: none;

         }

         /* 大盒子中主体小盒子 */

         #bd{

             height: 255px;

         }

         /* 各个小版块 */

         #bd div{

             height: 100%;

             display: none;

         }

         #bd,#hd .current{

             display: block;

             background-color: #ECEEF1;

         }

     </style>

 </head>

 <body>

     <div id="box">

         <ul id="hd">

             <li class="current">体育</li>

             <li>娱乐</li>

             <li>新闻</li>

             <li>综合</li>

         </ul>

         <div id="bd">

             <div class="current" style="display: block;">这是体育频道</div>

             <div>这是娱乐频道</div>

             <div>这是新闻频道</div>

             <div>这是综合频道</div>

         </div>

     </div>

     <!-- 插入JS代码 -->

     <script>

 //         思路:

 //             1.实现标题小模块的Tab切换

 //                 1.1 首先给所有的标题小模块清除样式

 //                 1.2 给鼠标移入的标题小模块添加样式

 //            2.实现主体模块和标题小模块之间的绑定

 //                2.1 给标题小模块添加一个属性index,用以记录标题小模块的索引

 //                2.2 通过getAttribute()方法得到索引,从而对应主体模块的内容

             var hd=document.getElementById('hd');

             //获得所有的标题小模块

             var lis=hd.getElementsByTagName('li');

             //获得所有的主体模块

             var bd=document.getElementById('bd');

             var divs=bd.getElementsByTagName('div');

             //给所有的li注册事件

             for(var i=0;i<lis.length;i++){

                 var li=lis[i];

                 li.setAttribute('index',i);

                 li.onmouseover=function(){

                     //每次鼠标移入的时候,清除所有的小模块样式,只给当前的小模块加入样式

                     for(var i=0;i<lis.length;i++){

                         lis[i].className="";//所有模块样式清除

                         this.className="current";

                     //鼠标移入的时候,给所有的主体模块清除样式,然后给对应当前小模块的主体模块添加样式

                         divs[i].className="";

                         divs[i].style.display="none";

                         //对当前的模块的进行操作

                         var index=parseInt(this.getAttribute('index'));

                         divs[index].className="current";

                         divs[index].style.display="block";

                     }

                 }

             }

     </script>

 </body>

 </html>

JavaScript实现Tab切换的更多相关文章

  1. JavaScript的Tab切换

    在网页设计中经常要用到tab切换,遂整理了一下常用的两种方法. 先看一下示例代码: HTML: <!doctype html> <html lang="en"&g ...

  2. 怎么用JavaScript实现tab切换

    先看一下代码实现后的最终效果: 用JavaScript实现思路很简单,就是先把所有的内容隐藏,点击标题对应的内容显示, css代码如下: <style type="text/css&q ...

  3. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  4. 实用CSS3属性之 :target伪类实现Tab切换效果

    CSS3 :target伪类用来改变页面中锚链接URL所指向的ID样式,例如你要改变描链接指向#tab的元素字体颜色为蓝色,哪么你可以这样写成#tab:target {color:blue} 浏览器支 ...

  5. javascript回车完美实现tab切换功能

    javascript通过回车实现tab切换功能,最经有一个项目是给化工厂做的在使用的过程中需要输入大量的数据,使用的都是小键盘区,在以前都是通过excel录入数据的现在, 在网页上需要实现excel ...

  6. javascript学习教程之---如何从一个tab切换到banner幻灯片的转换

    一个简单的tab切换代码: <!doctype html> <html> <head> <meta charset="utf-8"> ...

  7. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. JavaScript学习笔记2之Tab切换

    1.Tab切换简写版1 页面布局如下: <div id="tab"> <h1 id="title"> <span class=&q ...

  9. JavaScript实现Tab栏切换

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 京东网页上,可以看到下面这种tab栏的切换: 我们把模型抽象出来,实现一 ...

随机推荐

  1. Word中划线的方法（五种）

    Word中划线的方法(五种): 1. 按CTRL+F9,在出现的黑底花括号内,如图输入内容, 最后按SHIFT+F9(或者右键菜单点切换域代码),以后可以反复按ALT+F9在代码与结果之间切换. 注: ...

  2. SharePoint 2013 - Breadcrumb

    By default SharePoint 2013 doesn’t have a breadcrumb (like the 2010 version used to have). This was ...

  3. Android StickHeaderRecyclerView - 让recyclerview头部固定

    介绍在项目中有时会需要recyclerview滑动式时某个view滑出后会固定在头部显示,比较常用的比如手机联系人界面.地区选择界面等. StickHeaderRecyclerView就是实现这个功能 ...

  4. Android学习——Fragment与Activity通信（二）

    接下来就要到Fragment向Activity传输数据了.主要的思路,就是在Fragment中创建一个回调接口,利用该回调接口实现Fragment向Activity传输数据的功能. 回调函数(接口) ...

  5. check_mk通用应用检测插件

    客户端mk_tvmapp import json filename = '/tmp/tvmapp.json' print '<<<tvmapp>>>' for a ...

  6. May 11th 2017 Week 19th Thursday

    If you fell down yesterday, stand up today. 昨天跌倒了,今天仍然要站起来. From Herbert George Wells. If you fell d ...

  7. 解决Myeclipse报PermGen space异常的问题

    最近使用eclipse做开发,使用的服务器是tomcat,但在启动时报了Caused by: java.lang.OutOfMemoryError: PermGen space的异常. 这个错误很常见 ...

  8. Visual Studio 2012 未找到与约束 ContractName问题，及printf unsafe问题

    1.用VS 2012 创建c++项目失败,提示未找到与约束 ContractName .............的错误 解决办法:下载VS 2012 补丁,很小的一个补丁,不过很管用 地址:http: ...

  9. 让ADO.NET Entity Framework 支持ACCESS数据库

    如写的不好请见谅,本人水平有限. 个人简历及水平:. http://www.cnblogs.com/hackdragon/p/3662599.html 接到一个程序和网页交互的项目,用ADO.NET ...

  10. BZOJ4566:[HAOI2016]找相同字符(SAM)

    Description 给定两个字符串,求出在两个字符串中各取出一个子串使得这两个子串相同的方案数.两个方案不同当且仅当这两 个子串中有一个位置不同. Input 两行,两个字符串s1,s2,长度分别 ...