在网页开发中，常常会遇见很多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. Js 对象数组，转化为字符串

    var str = [{"cuid":"23910","content":"是","type":&q ...

  2. maven学习（三）maven仓库

    官网图片: maven仓库: 仓库通常配置在settings.xml文件中,此处注意settings.xml的优先级:用户 > 全局,广义上maven的仓库一共包含两种: 1.本地仓库,默认在& ...

  3. redis的使用方式

    常用的语法以及使用方式:          key中不能包含回车空格等,key不要太长,占用内存.     概念介绍:         差集: a:{1,2,3} b:{2,3,4},以a为锚点,差集 ...

  4. C#程序集

    我的理解: 程序集是一个物理上的概念,一个项目生成的exe或者dll都可以叫做一个程序集,internal修饰的内容可以在程序集内可见.

  5. Linux学习笔记之Linux第一课-基本介绍

    Linux简介 Linux内核最初只是由芬兰人李纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux是一套免费使用和自由传播的类Unix操作系统,是一个基 ...

  6. 配置一个高效快速的Git环境

    username and email editor difftool and mergetool alias 可以直接修改~/.gitconfig文件,也可以用命令配置一个可以实际使用的高效的Git环 ...

  7. dedecms 模板文件不存在 无法解析文档！问题定位方法！

    生成静态的时候,经常会遇到“模板文件不存在,无法解析文 档!”的问题.很多朋友试过论坛里很多方法,都是针对某些人可以解决,某些人的问题依旧,为什么呢?其实问题很可能确实是多种多样的,表现结果却是一样, ...

  8. 用 dbgrid 或 dbgrideh 如何让所显示数据自动滚动

    procedure TForm1.Timer1Timer(Sender: TObject);varm:tmessage;begin m.Msg:=WM_VSCROLL; m.WParamLo:=SB_ ...

  9. kahadb设计

    Kahadb设计思想   简介 hakadb是activemq的持久化数据库,作为消息队列的存储,每个消息有一个消息ID,提供了对消息的快速的查找,更新,以及消息的事物支持,以及意外磬机之后的恢复.丰 ...

  10. 浅析内存对齐与ANSI C中struct型数据的内存布局-内存对齐规则

    这些问题或许对不少朋友来说还有点模糊,那么本文就试着探究它们背后的秘密. 首先,至少有一点可以肯定,那就是ANSI C保证结构体中各字段在内存中出现的位置是随它们的声明顺序依次递增的,并且第一个字段的 ...