在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、tab标签的切换等等。这段时间学习了JS后，开始要写出一些简单的特效。今天我也分享一个简单tab标签切换的例子。先附上代码：

HTML代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="js/tab.js" type="text/javascript" ></script>

        <style type="text/css">

        li {

            list-style: none;

        }

            * {

                padding: 0;

                margin: 0;

            }

            .tab-list  {

                text-align: center;

                line-height: 40px;

                font-family: "微软雅黑";

                height: 40px;

                border-bottom: none;

            }

            .tab-list  li {

                float: left;

                border: 1px solid #000;

                border-right: none;

                width: 100px;

                cursor: pointer;

            }

            .tab-list li:last-of-type {

                border-right: 1px solid #000;

            }

            .tab-content  li {

                width: 302px;

                height: 300px;

                border: 1px solid #000;

                text-align: center;

                line-height: 300px;

                margin-top: 0px;

            }

        </style>

    </head>

    <body>

        <div class="tab">

            <ul class="tab-list">

                <li>one</li>

                <li>two</li>

                <li>three</li>

            </ul>

            <ul class="tab-content">

                <li style="background-color:cornflowerblue;">我是one</li>

                <li style="display: none;background-color: burlywood;">我是two</li>

                <li style="display: none;background-color:mediumaquamarine;">我是three</li>

            </ul>

        </div>

    </body>

</html>

JS代码：

var  eItemList = document.querySelectorAll(".tab-list li");

            var eContentList = document.querySelectorAll(".tab-content li");

            //给元素编号

             for (var i=0;i<eItemList.length;i++) {

                 eItemList[i].index=i;  //index是自定义属性，用来保存编号

                 eItemList[i].onmouseover=function() {

                 for (var i=0;i<eContentList.length;i++) {

                 eContentList[i].style.display="none";        //先将内容全部隐藏

                 }

                 eContentList[this.index].style.display="block";  //当鼠标触发时再显示对应的内容

                 for (var i=0;i<eItemList.length;i++) {

                 eItemList[i].style.background="none";        //将背景色设置为无

                 }

                 eItemList[this.index].style.background="indianred";

             };

        }

效果如下：

在做Tab标签切换时，首先是先写好整体框架。在这里，先将内容区的三个div分别隐藏。然后当鼠标放在tab标签上时，再执行相关操作，将div内容显示出来。关键的问题是如何将标签与内容区对应起来。所以，用 eItemList[i].index=i; 设置当前元素的编号。然后eContentList[this.index],将tab元素与内容区关联起来。

JS特效之Tab标签切换的更多相关文章

  1. JS 实现 Tab标签切换功能

    Tab标签切换 效果图: HTML部分: <div class="wrap">     <ul id="tag">       < ...

  2. 网站开发，推荐使用SuperSlide 插件-Tab标签切换，图片滚动，无缝滚动，焦点图

    SuperSlide 致力于解决网站大部分特效展示问题,使网站代码规范整洁,方便维护更新.网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解 ...

  3. Bootstrap——设置Tab标签切换

    最近一个小项目需要用Tab标签切换显示不同div内容,用到了Bootstrap里面的东西,但是在Bootstrap3教程里却没有找到对应的代码,这里记录一下,方便以后快速查阅学习. 代码如下: < ...

  4. Vue指令：v-for的用法；v-bind绑定class的几种写法；tab标签切换

    一.v-for 的用法 循环指令,可以遍历 Number.String.Object.Array: 循环数字.字符串:有2个参数,分别是value和索引值: 循环对象:有3个参数,分别是 属性值.属性 ...

  5. 纯js实现网页tab选项卡切换效果

    纯js实现网页tab选项卡切换效果 百度搜索     js 点击菜单项就可以切换内容的效果

  6. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  7. 每天一个JavaScript实例-tab标签切换

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  8. 很好用的Tab标签切换功能，延迟Tab切换。

    一个网页,Tab标签的切换是常见的功能,但我发现很少有前端工程师在做该功能的时候,会为用户多想想,如果你觉得鼠标hover到标签上,然后切换到相应的内容,就那么简单的话,你将是一个不合格的前端工程师啊 ...

  9. 一个页面tab标签切换，都有scroll事件的解决办法

    当前页有多个tab,如果都有scroll事件, 先解绑$(window).off('scroll') 再执行scroll就不可以了,多个标签就不会互相干扰: 给你们个例子: //标签切换    $(' ...

随机推荐

  1. Ubuntu 14.04 64bit 安装tensorflow（GPU版本）

    本博客主要用于在Ubuntu14.04 64bit 操作系统上搭建google开源的深度学习框架tensorflow. 0.安装CUDA和cuDNN 如果要安装GPU版本的tensorflow,就必须 ...

  2. 感恩回馈，新鲜出炉的《ASP.NET MVC 5框架揭秘》免费赠送

    上次针对<ASP.NET Web API 2框架揭秘>举办了一次评论赠书活动,很多人问我相同的活动要不要针对<ASP.NET MVC 5框架揭秘>(阅读样章)再来一次,为此我向 ...

  3. JavaScript之自我总结篇

    最近在看汤姆大叔的"深入理解JavaScript系列",写得真的不错,对于我而言特别是12章到19章,因为大叔研究的点,就主要是从底层来研究JavaScript为什么会出现钟种特有 ...

  4. 分享一段数据库中表数据更新SQL

    应用场景 我们在应用程序开发的时候,经常会遇到这样的一种情况:附属表更新了,主表的数据没有更新,这个关联表不只是外键的关联(通过附属表 ID 关联),主表中还会存在一些附属表的字段,这样一般做的目的是 ...

  5. ZOJ Problem Set - 1049 I Think I Need a Houseboat

    这道题目说白了是一道平面几何的数学问题,重在理解题目的意思: 题目说,弗雷德想买地盖房养老,但是土地每年会被密西西比河淹掉一部分,而且经调查是以半圆形的方式淹没的,每年淹没50平方英里,以初始水岸线为 ...

  6. MVC前台Post/Get异步获得数据时参数的取值问题

    Post方法,返回text,后台获得Data View $.ajax({ type: "POST", dataType: "text",//返回类型为文本 ur ...

  7. httphandler和httpmodule的区别

    ASP.Net处理Http Request时,使用Pipeline(管道)方式,由各个HttpModule对请求进行处理,然后到达 HttpHandler,HttpHandler处理完之后,仍经过Pi ...

  8. 关于一道PHP面试题的解法

    参照一个int型数组,如int[] a1=new int[]{10,9,10,20,15,3,9,8,7,1,1},编写一个方法,要求输出不重复,且降序的拼接字符串(连接字符用逗号),如上数组,输出的 ...

  9. 大数据下的Distinct Count（二）：Bitmap篇

    在前一篇中介绍了使用API做Distinct Count,但是精确计算的API都较慢,那有没有能更快的优化解决方案呢? 1. Bitmap介绍 <编程珠玑>上是这样介绍bitmap的: B ...

  10. Microsoft Visual Studio 2008 未能正确加载包“Visual Web Developer HTML Source Editor Package” | “Visual Studio HTM Editor Package”

    在安装Microsoft Visual Studio 2008 后,如果Visual Studio 2008的语言版本与系统不一致时,比如:在Windows 7 English System 安装Vi ...