在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、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. Angularjs在控制器(controller.js)的js代码中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期.格式化数字精度.语言本地化.格式化货币等等.但这些过滤器一般都是在VIEW中使用的,比 ...

  2. 谈谈php里的DAO Model AR

    这次要谈的3个关键字:DAO.Model.AR,是我们在做web应用时常见的几个概念,也被称作设计模式(design pattern),先简单看看它们的全拼和中文: DAO:Data Access O ...

  3. Windows无法安装到这个磁盘。请确保在计算机的BIOS菜单中启用了磁盘控制器

    今天一朋友问我这个问题,呃,以前我也遇到过,但忘记记录了,这次就记录一下吧,就懒得打字了,图片里面很清楚了 不说点什么的话是不是太水了O(∩_∩)O~,好吧扩充一下: Windows无法安装到这个磁盘 ...

  4. Sql Server系列：数据库对象

    数据库对象是数据库的组成部分,数据表.视图.索引.存储过程以及触发器等都是数据库对象. 数据库的主要对象是数据表,数据表是一系列二维数组的集合,用于存储各种信息. 视图表面上看与表几乎一样,具有一组命 ...

  5. n维数组实现(可变参数表的使用)

    首先先介绍一下可变参数表需要用到的宏: 头文件:#include<cstdarg> void va_start( va_list arg_ptr, prev_param ); type v ...

  6. MySQL学习笔记十：日志管理

    1.错误日志文件 MySQL的错误日志文件记录错误信息,还会记录mysqld进程的关闭和启动的信息,但也不是什么错误信息都会记录,只记录mysqld进程运行过程中发生的关键性错误. 错误日志的启动,可 ...

  7. 【PHP面向对象(OOP)编程入门教程】17.克隆对象__clone()方法

    有的时候我们需要在一个项目里面,使用两个或多个一样的对象,如果你使用“new”关键字重新创建对象的话,再赋值上相同的属性,这样做比较烦琐而且也容易出错,所以要根据一个对象完全克隆出一个一模一样的对象, ...

  8. LeetCode刷题系列

    LeetCode 我们工作面试和提高自身数据结构和算法能力的时候往往需要刷刷题,我选择LeetCode是通过一个留学论坛了解的.专业,覆盖语种全面. 提前说说刷题的心得: 尽量手写代码,少使用IDE的 ...

  9. JSP自定义tag

    前端需要调用后端的配置,想起velocity-tools.然而jsp的话,目前只能想到tag和EL表达式了. Tag相当好写,jsp2.0提供了简化写法: 编写一个java类: public clas ...

  10. Debugging into .NET Core源代码的两种方式

    一.前言 .NET开源时间还不长,因为一直在做YOYOFx的关系,所似我常常有更深入的了解.NET Core和ASP.NET Core内容的需求,并且.NET Core平台与之前版本的变化太大,这也导 ...