在网页开发中，常常会遇见很多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

代码如下：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head lang="en">
  4.      <meta charset="UTF-8">
  5.      <title></title>
  6.      <style>
  7.          *{
  8.              padding: 0px;
  9.              margin: 0px;
  10.          }
  11.          /* 总体大盒子 */
  12.          #box{
  13.              width: 400px;
  14.              height: 300px;
  15.              border: 1px solid gray;
  16.              margin: 100px auto auto;
  17.          }
  18.          /* 大盒子中头部小盒子ul */
  19.          #hd{
  20.              height: 45px;
  21.          }
  22.          /* 小盒子ul中li标签 */
  23.          #hd li{
  24.              height: 45px;
  25.              display: inline-block;
  26.              line-height: 45px;
  27.              width: 98px;
  28.              text-align: center;
  29.              border: 1px solid gray;
  30.              float: left;
  31.              list-style: none;
  32.          }
  33.          /* 大盒子中主体小盒子 */
  34.          #bd{
  35.              height: 255px;
  36.          }
  37.          /* 各个小版块 */
  38.          #bd div{
  39.              height: 100%;
  40.              display: none;
  41.  
  42.          }
  43.  
  44.          #bd,#hd .current{
  45.              display: block;
  46.              background-color: #ECEEF1;
  47.          }
  48.      </style>
  49.  
  50.  </head>
  51.  <body>
  52.      <div id="box">
  53.          <ul id="hd">
  54.              <li class="current">体育</li>
  55.              <li>娱乐</li>
  56.              <li>新闻</li>
  57.              <li>综合</li>
  58.          </ul>
  59.  
  60.          <div id="bd">
  61.              <div class="current" style="display: block;">这是体育频道</div>
  62.              <div>这是娱乐频道</div>
  63.              <div>这是新闻频道</div>
  64.              <div>这是综合频道</div>
  65.          </div>
  66.      </div>
  67.      <!-- 插入JS代码 -->
  68.      <script>
  69.  //         思路:
  70.  //             1.实现标题小模块的Tab切换
  71.  //                 1.1 首先给所有的标题小模块清除样式
  72.  //                 1.2 给鼠标移入的标题小模块添加样式
  73.  //            2.实现主体模块和标题小模块之间的绑定
  74.  //                2.1 给标题小模块添加一个属性index,用以记录标题小模块的索引
  75.  //                2.2 通过getAttribute()方法得到索引,从而对应主体模块的内容
  76.              var hd=document.getElementById('hd');
  77.              //获得所有的标题小模块
  78.              var lis=hd.getElementsByTagName('li');
  79.              //获得所有的主体模块
  80.              var bd=document.getElementById('bd');
  81.              var divs=bd.getElementsByTagName('div');
  82.              //给所有的li注册事件
  83.              for(var i=0;i<lis.length;i++){
  84.                  var li=lis[i];
  85.                  li.setAttribute('index',i);
  86.                  li.onmouseover=function(){
  87.                      //每次鼠标移入的时候,清除所有的小模块样式,只给当前的小模块加入样式
  88.                      for(var i=0;i<lis.length;i++){
  89.                          lis[i].className="";//所有模块样式清除
  90.                          this.className="current";
  91.                      //鼠标移入的时候,给所有的主体模块清除样式,然后给对应当前小模块的主体模块添加样式
  92.                          divs[i].className="";
  93.                          divs[i].style.display="none";
  94.  
  95.                          //对当前的模块的进行操作
  96.                          var index=parseInt(this.getAttribute('index'));
  97.                          divs[index].className="current";
  98.                          divs[index].style.display="block";
  99.                      }
  100.                  }
  101.              }
  102.      </script>
  103.  </body>
  104.  </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. Python爬虫《爬取get请求的页面数据》

    一.urllib库 urllib是Python自带的一个用于爬虫的库,其主要作用就是可以通过代码模拟浏览器发送请求.其常被用到的子模块在Python3中的为urllib.request和urllib. ...

  2. H5左滑删除JS插件

    <script type="text/javascript"> /** * zepto插件:向左滑动删除动效 * 使用方法:$('.itemWipe').touchWi ...

  3. 设计模式之适配器模式（Adapter）

    1. 概述 将一个类的接口转换成客户希望的另外一个接口.Adapter模式使得原本由于接口不兼容而不能一起工作的那些类可以在一起工作. 2. 解决的问题 即Adapter模式使得原本由于接口不兼容而不 ...

  4. 【Hibernate那点事儿】—— Hibernate应该了解的知识

    前言: 最近由于有点时间,就像深入的学习一下Hibernate.之前只是简单的使用,并没领会它的妙处.这里就趁着分享的机会,好好整理一下. 这篇主要讲到了下面几个部分: Hibernate框架 Hib ...

  5. sqlplus中设置在屏幕中上不打印出输出

    在某些特定的情况下我们想在做某种实验,需要执行一段sql语句,但是不想在屏幕上打印出sql语句的结果(太长了)可以采用如下方式.1    把想要执行的语句写到一个sql脚本中,例如:[oracle@i ...

  6. scrum3

    首先我一直做的是框架的设计,但不同的是这次我们整合完善了这个软件目前的所有需求也定义好了它的大题框架,总的来说设计部分已经结束,现在也就是本次冲刺,我们将重点进行整个软件的数据库编程环节,也就是用SQ ...

  7. Jmeter入门11 使用Simple Controller组织接口测试用例

    接口测试实践中,可以使用Simple Controller来组织测试用例. 官网上说该控制器的主要用途用来组织采样器和其他的逻辑控制器等. 以下为一个接口测试项目结构示例: 1 测试计划 >添加 ...

  8. C语言 字符串的声明与使用

    // 字符串的定义和初始化 void test() { // "mj" char s[] = {'m', 'j', '\0'}; // 字符串"mj" ] = ...

  9. HDU 1205 鸽巢原理

    #include <bits/stdc++.h> using namespace std; long long abs_(long long a,long long b) { if(a&g ...

  10. 【[COCI2011-2012#5] POPLOCAVANJE】

    据说这道题卡空间? 不存在的,拿\(AC\)自动机去存\(5000\times5000\)的串肯定是要M的 我们可以考虑对长度为\(n\)的串建一个\(SAM\),这样空间就只需要两倍的\(3e5\) ...