在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、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. Building OpenCASCADE on Debian

    Building OpenCASCADE on Debian eryar@163.com Abstract. When you are familiar with OpenCASCADE on Win ...

  2. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  3. Win10系统菜单打不开问题的解决，难道是Win10的一个Bug ?

    Win10左下角菜单打不开,好痛苦,点击右下角的时间也没反应,各种不爽,折磨了我好几天,重装又不忍心,实在费劲,一堆开发环境要安装,上网找了很多方法都不适用.今天偶然解决了,仔细想了下,难道是Win1 ...

  4. 在 ML2 中配置 VXLAN - 每天5分钟玩转 OpenStack（110）

    上一节我们介绍了 VXLAN 的基本概念,今天介绍如何在 ML2 中启用 VXLAN. 在 /etc/neutron/plugins/ml2/ml2_conf.ini 设置 vxlan network ...

  5. 数据可视化-EChart2.0使用总结2

    接上一篇博客,这篇博客主要讨论EChart里面的散点图.气泡图和雷达图.   4.散点图-Scatter Chart 适合场景:三维数据集,但是只有两个维度需要比较.比较的是X轴和Y轴的数据,第三个数 ...

  6. 【续集】在 IIS 中部署 ASP.NET 5 应用程序遭遇的问题

    dudu 的一篇博文:在 IIS 中部署 ASP.NET 5 应用程序遭遇的问题 针对 IIS 部署 ASP.NET 5 应用程序的问题,在上面博文中主要采用两种方式尝试: VS2015 的 Publ ...

  7. spring源码分析之spring-core总结篇

    1.spring-core概览 spring-core是spring框架的基石,它为spring框架提供了基础的支持. spring-core从源码上看,分为6个package,分别是asm,cgli ...

  8. SQL SERVER四舍五入你除了用ROUND还有其他方法吗？

    引言 今天和测试沟通一个百分比计算方式时遇到一个问题, 我在存储过程里用到了强转CAST(32.678 AS DECIMAL(5,1))  我认为该方式只会保留一位小数,我给测试的回复是我并没有用到四 ...

  9. 【集合框架】JDK1.8源码分析之HashMap（一）

    一.前言 在分析jdk1.8后的HashMap源码时,发现网上好多分析都是基于之前的jdk,而Java8的HashMap对之前做了较大的优化,其中最重要的一个优化就是桶中的元素不再唯一按照链表组合,也 ...

  10. 你必须知道ASP.NET知识------关于动态注册httpmodule(对不起汤姆大叔)

    一.关于动态注册的问题 很多人看过汤姆大叔的MVC之前的那点事儿系列(6):动态注册HttpModule ,其实汤姆大叔没有发现httpmodule动态注册的根本机制在哪里. 亦即:怎么动态注册?为什 ...