在我们平时浏览网站的时候，经常看到的特效有图片轮播、导航子菜单的隐藏、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. Sql Server系列：流程控制语句

    T-SQL中用来编写流程控制模块的语句有:BEGIN...AND语句.IF...ELSE语句.CASE语句.WHILE语句.GOTO语句.BREAK语句.WAITFOR语句和RETURN语句. 1 B ...

  2. 【原创】数据挖掘案例——ReliefF和K-means算法的医学应用

    数据挖掘方法的提出,让人们有能力最终认识数据的真正价值,即蕴藏在数据中的信息和知识.数据挖掘 (DataMiriing),指的是从大型数据库或数据仓库中提取人们感兴趣的知识,这些知识是隐含的.事先未知 ...

  3. 使用jQuery的animate方法制作滑动菜单

    周末看Ziv小威的博客<制作滑动条菜单,如何延时处理滑动效果,避免动画卡顿>,参见地址:http://www.cnblogs.com/zivxiaowei/p/3462964.html.是 ...

  4. PHP程序员如何理解IoC/DI

    思想是解决问题的根本 思想必须转换成习惯构建一套完整的思想体系是开发能力成熟的标志 详情请点击

  5. 坑爹的Maven

    之前没用过Maven,最近在研究Curator的时候,导入别人的工程,但是没有相应的包,需使用Maven解决依赖.于是各种折腾,最后虽然解决了,但中间的坑还不少.尽管网上也有相应的安装教程,但很多都是 ...

  6. 从客户端(&)中检测到有潜在危险的 Request.Path 值

    首先,这个问题出现在 ASP.NET MVC 应用程序中,所以下面的解决方式都是在这个环境下. 关于这个问题,网上又很多的答案,当时也搜了一些: A potentially dangerous Req ...

  7. C# 原样复制excel工作表

    在excel中,工作表是工作薄的组成部分,一个工作薄可以由一个或多个工作表组成,一个工作薄也可以说是一个excel文档,正因为如此,excel工作表的复制也就分为两种类型:在同一文档之内复制和在不同文 ...

  8. 一张H5游戏页引起的思考

    最近开发了一个移动端的端午活动页面,做完后就想写点东西总结一下,感受最深的就是打草稿. 刚开始并没有打草稿,直接开干,越做到后面就越觉得代码很乱很杂,非常不舒服,做到哪个页面写这个页面的CSS,没有大 ...

  9. 字符串模式匹配之KMP算法图解与 next 数组原理和实现方案

    之前说到,朴素的匹配,每趟比较,都要回溯主串的指针,费事.则 KMP 就是对朴素匹配的一种改进.正好复习一下. KMP 算法其改进思想在于: 每当一趟匹配过程中出现字符比较不相等时,不需要回溯主串的 ...

  10. SSH框架入门知识总结

    chap01 领略清晰的MVC流程----Struts讲解技术资料.pdf   提取码:wwi5 chap02 体验控制反转的理念----Spring介绍技术文档.pdf    提取码:0mp3 ch ...