javaScript实例：tab切换效果

最新推荐文章于 2024-02-20 15:01:01 发布

new_codeer

最新推荐文章于 2024-02-20 15:01:01 发布

阅读量5.8k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/new_codeer/article/details/52200566

版权

javascript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

我们平时经常会用到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>

new_codeer

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javaScript实例：tab切换效果

我们平时经常会用到tab切换的效果，如下图：这个效果很常见，用js就可以实现。布局分析：我们可以先让其中的一块内容显示，其他的内容先隐藏，当用户点击头部标签时，可以让当前内容隐藏，点击部分的内容显示出来。通过改变标签样式就可以实现。html、css代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <
复制链接

扫一扫