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

  2. OPEN CASCADE BSpline Curve Interpolation

    OPEN CASCADE BSpline Curve Interpolation eryar@163.com Abstract. Global curve interpolation to point ...

  3. Codeforces Round #323 (Div. 2) C.GCD Table

    C. GCD Table The GCD table G of size n × n for an array of positive integers a of length n is define ...

  4. ASP.NET Core中的依赖注入（5）：ServicePrvider实现揭秘【补充漏掉的细节】

    到目前为止,我们定义的ServiceProvider已经实现了基本的服务提供和回收功能,但是依然漏掉了一些必需的细节特性.这些特性包括如何针对IServiceProvider接口提供一个Service ...

  5. Delete Volume 操作 - 每天5分钟玩转 OpenStack（57）

    今天讨论 cinder 如何删除 volume . 状态为 Available 的 volume 才能够被 delete.如果 volume 当前已经 attach 到 instance,需要先 de ...

  6. swift 中指针的使用UnsafeMutablePointer

    在swift中已经弱化了指针的使用,可以这么使用 let s: NSRange = NSMakeRange(, ) let at = UnsafeMutablePointer<NSRange&g ...

  7. typeof的一些兼容性问题

    typeof存在一些兼容性的问题,在IE6,7,8中的DOM和BOM元素及其对象上的方法的判定会出现误差,在safari上对NodeList实例 的判定,对ExpReg实例的判断(早期的chrome, ...

  8. [linux]ssh（转载）

    ssh登陆问题 SSH分客户端openssh-client和openssh-server 如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则su ...

  9. 从SqlServer转手Oracle的一些坑

    为将SqlSugar ORM转制成OracleSugar ORM 本想一天搞定,凭着经验不看任何Oracle资料就直接强上了,但是从配置PLSQL和一些语法区别带来了很多坑让我进度放缓 这个贴子对于身 ...

  10. Data source rejected establishment of connection, message from server: "Too many connections"解决办法

    异常名称 //数据源拒绝从服务器建立连接.消息:"连接太多" com.MySQL.jdbc.exceptions.jdbc4.MySQLNonTransientConnection ...