javaScript实例：tab切换效果

来源：互联网发布：网络课程运营编辑：程序博客网时间：2024/05/02 01:00

我们平时经常会用到tab切换的效果，如下图：

这里写图片描述

这个效果很常见，用js就可以实现。

布局分析：

我们可以先让其中的一块内容显示，其他的内容先隐藏，当用户点击头部标签时，可以让当前内容隐藏，点击部分的内容显示出来。通过改变标签样式就可以实现。

html、css代码如下：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>tab切换效果</title>    <style>        #tab-nav{            overflow: hidden;            padding: 0;            margin: 0;            cursor: hand;        }        #tab-nav li{            float: left;            display: block;            width: 100px;            height: 30px;            line-height: 30px;            text-align: center;            border: 1px solid #bbb;            border-bottom: none;        }        #tab-nav .on{            background: #ccc;            color: red;        }        #tab-con div{            display: none;        }        #tab-con .selected{            display: block;            width: 650px;            height: 300px;            padding: 30px;            line-height: 40px;            color: #c3c3c3;            border: 1px solid #c3c3c3;        }    </style></head><body>    <ul id="tab-nav" type="none">        <li class="on">number</li>        <li>String</li>        <li>boolean</li>        <li>undefined</li>        <li>null</li>        <li>object</li>    </ul>    <div id="tab-con">        <div class="selected">            number类型表示整型和浮点型，基本的数值字面量格式都是十进制。<br/>            此外，整数的字面量还可以是八进制和十六进制。<br/>            NaN即非数值，是number类型中的一个特殊值<br/>            NaN用于表示本来要返回一个数值的操作数，结果未返回数值的情况（这样不会报错）。<br/>        </div>        <div>            string类型用于表示由零个或多个16位unicode字符组成的字符序列，即字符串，由双引号或单引号表示。        </div>        <div>boolean类型有两个字面值：true 和 false<br/>            在js中所有类型值都有与这两个布尔值等价的值<br/>            1.特殊值undefined和null -- false<br/>            2.数字0和NaN -- false<br/>            3.空字符串 -- false<br/>            4.所有其他值 -- true<br/>        </div>        <div>undefined类型只有一个特殊值为undefined<br/>            声明变量未初始化时，这个变量的值就是undefined<br/>        </div>        <div>null类型只有一个特殊值为null<br/>            从逻辑角度来看，null表示空对象指针，所以typeof检测时返回object。<br/>            如果变量准备在将来用于保存对象，那么该变量最好初始化为null。<br/>        </div>        <div>JavaScript中对象其实就是一组数据和功能的集合。<br/>            var obj1=[1,2,3];<br/>            var obj2={name:'laowang'};<br/>        </div>    </div>   </body></html>

我用了两种思路来实现这个效果。

思路一

首先可以给每一个导航块标记一个index，这样等用户点击导航块时，先将所有的li与tab-con中的子div的className清空，然后再通过index标记，把点击的导航块和对应的div的className分别设置为on和selected。

<script>        var lis = document.getElementById("tab-nav").getElementsByTagName("li");        var divs = document.getElementById("tab-con").getElementsByTagName("div");        for(var i=0;i< lis.length;i++){            lis[i].index = i;            lis[i].onclick = function(){                for(var j=0;j<divs.length;j++){                    lis[j].className="";                    divs[j].className="";                }                lis[i].className = "on";                divs[this.index].className="selected";            }        }</script>

思路二

每次点击事件后，对导航块进行一次遍历判断，找到本次点击的导航块之后，将这个导航块和对应的div的className改变，并且将其他的className清空。

<script>        var lis = document.getElementById("tab-nav").getElementsByTagName("li");        var divs = document.getElementById("tab-con").getElementsByTagName("div");        for(var i=0;i<lis.length;i++){            lis[i].onclick = function(){                for(var i=0;i<lis.length;i++) {                    if (this == lis[i]) {                        lis[i].className = "on";                        divs[i].className = "selected";                    }                    else {                        lis[i].className = "";                        divs[i].className = "";                    }                }            }        }    </script>

0 0