在网页开发中，常常会遇见很多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. HTML标签 链接 随笔3

    4-1 <a>标签  网页链接 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这个标签. 语法: <a href="目标网 ...

  2. JavaScript数组常见操作

    JavaScript数组常见操作 Tip: 右键在新标签中打开查看清晰大图 下面介绍JavaScript中的数组对象遍历.读写.排序等操作以及与数组相关的字符串处理操作 创建数组 一般使用数组字面量[ ...

  3. linux C之判断文件或目录是否存在 access函数

    http://blog.sina.com.cn/s/blog_6a1837e90100uh5d.html access():判断是否具有存取文件的权限 相关函数    stat,open,chmod, ...

  4. wxpython 界面布局

    1.frame.Centre() 窗口出来后显示居中 2.textCtrl文本框style=wx.TE_PASSWORD密码, wx.TE_MULTILINE多行输入 3.单选按钮组 4.列表 5.图 ...

  5. 订阅无法在 ARM 模式下创建虚拟机，只能在 ASM 模式下创建 Azure VM 部署

    问题描述 资源组所有者可以在新版 portal 创建经典模式的虚拟机,但是无法创建 ARM 模式的虚拟机. 问题现象 环境中有个相对权限比较高的账户,比如 account admin (以下简称为 A ...

  6. centos开启IPV6配置方法

    目前国内大部分服务器和PC不支持IPV6地址的,但是服务器上本身是可以正常开启IPV6服务,有部分程序在服务器上运行的时候,需要服务器能监听一个ipv6地址才行,因此本文档指导如何在centos服务器 ...

  7. jsencrypt代码分析——openssl的rsa加密解密在js的实现

    在js上做rsa,感觉jsencrypt这个是封装的比较好的,但用起来还是遇到了些坑,所以踩进代码里填填坑- 项目在这里 https://github.com/travist/jsencrypt [r ...

  8. Struts2学习-拦截器2续

    定义拦截器有2种办法:1.实现Interceptor接口2.集成AbstractInterceptor抽象类 一.方法1 ..... <struts> <package name=& ...

  9. March 14 2017 Week 11 Tuesday

    Thinking will not overcome fear but action will. 空想终日惶恐,行动方可无惧. As the deadline comes closer and clo ...

  10. Flexbox 布局的最简单表单

    作者: 阮一峰 日期: 2018年10月18日 弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方 ...