在网页开发中，常常会遇见很多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. 介绍一款web端的截图工具

    牛牛截图,web端的一款截图工具,下面是代码及实例. 依赖jquery-1.7.min.js /**************************************************** ...

  2. asp.net后台获取html控件的值

    1.asp.net后台获取前台type=text控件的值 前台:<input name="txtName" class="username" type=& ...

  3. Js 对象数组，转化为字符串

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

  4. selenium 等待元素加载

    今天,尝试用代码指定自动化测试用例. 将测试record导出为C# 代码后,使用FF的drive ,发现执行一直失败,提示无法加载元素.顿时一种无力感袭来啊.还是硬着头皮找方法.尝试id name x ...

  5. check_mk通用应用检测插件

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

  6. SQL Server ->> CLR存储过程枚举目录文件并返回结果集

    因工作需要写了个CLR存储过程枚举目录文件并返回结果集 using System; using System.IO; using System.Collections.Generic; using S ...

  7. Tomcat无法正常启动start.bat 一闪而过、只显示USING 故障排除

    在云主机上配置tomcat的时候遇到的问题. 1. 开始的时候我将自己用的tomcat6绿色版打包放到了主机上,当我打开bin下面的时候startup.bat时,控制台一闪而过,查看log文件没有任何 ...

  8. 5.Zabbix 3.0案例

    请查看我的有道云笔记: http://note.youdao.com/noteshare?id=15d986179cb65b45c5824e90995109ee&sub=D2E73572D97 ...

  9. mysql导入csv格式文件

    今天测试导入csv格式文件,虽然简单但是如果不注意还是会出现错误,而且mysql在某些方面做的确实对新手不是很友好,记录一下:创建一个csv格式文件:[mysql@xxx1 ycrdb]$ more ...

  10. C# 调用 SQL server 初探

    相信不少人都和我一样: 1.学过数据库原理接触过SQL Server,做过一套卷子外加一个数据库设计作业: 2.学过C# 但从来还没在程序里用到过数据库(哈哈,新手躺枪) 这也是我第一次在C#里用数据 ...