在网页开发中，常常会遇见很多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拍个照（如何将html元素转成图片）

    本文主要介绍一款好用的库,如何将HTML生成图片. 1.简述 最近在做的项目中,需要将界面转换成模板保存下来,本来想使用自适应布局完成,但是页面较复杂,模板较多,生成的模板使用过多的HTML标签,于是 ...

  2. input文本框点击第一次光标在最右边

    效果: 样式效果引入bootstrap4.0就OK了. HTML代码: <div class="input-group w-25"> <div class=&qu ...

  3. iframe中插入代码并执行

    最近有需求通过iframe插入代码.有蛮多方法,如下: 1 var iframe = document.getElementById('previewUrl'); 2 iframe.src = 'ab ...

  4. JSP 之 8种HTTP的请求方式 之 页面组成等

    HTTP请求的方法: HTTP/1.1协议中共定义了八种方法(有时也叫“动作”),来表明Request-URL指定的资源不同的操作方式   1.OPTIONS 返回服务器针对特定资源所支持的HTTP请 ...

  5. siebel 界面搭建

    Siebel界面的初步搭建都是基于Siebel Tools工具来创建的,其搭建步骤: 1. 首先先创建一个Project项目,点击project--->点 new Record--->输入 ...

  6. flask factory

    https://gist.github.com/zaccrites/c5bcf96ed90907d92042 import jinja2 from flask import Flask, render ...

  7. Selenium2学习（十八）-- js处理内嵌div滚动条

    前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相. ...

  8. laravel5.4学习笔记

    1.安装laravel可以直接用composer安装,然后用laravel new xxx来新建项目 服务器上安装了composer(php包管理工具)以后, composer global requ ...

  9. Docker入门系列之二：使用dockerfile制作包含指定web应用的镜像

    实现题目描述的这个需求有很多种办法,作为入门,让我们从最简单的办法开始. 首先使用命令docker ps确保当前没有正在运行的Docker实例. 运行命令docker run -it nginx: 然 ...

  10. Docker镜像提交命令commit的工作原理和使用方法

    在本地创建一个容器后,可以依据这个容器创建本地镜像,并可把这个镜像推送到Docker hub中,以便在网络上下载使用. 下面我们来动手实践. docker pull nginx:1.15.3 用命令行 ...