Tab切换效果（Html+css+js）

沐曦可期

已于 2022-10-18 12:45:09 修改

阅读量2.6k

点赞数 4

文章标签： javascript html css

于 2022-10-18 12:34:34 首次发布

本文链接：https://blog.csdn.net/qq_62714412/article/details/127384652

版权

最近做了一个小练习，分享给大家，主要思路就是用Html和css搭建起基本框架，然后用js实现内容和高亮边框的跳转效果，效果图如下：

首先是搭建html结构，我们将内容看成三个盒子，一个大的盒子包裹两个小的盒子，大盒子就是背景为白色的部分，小盒子分为包含上面列表部分的上部分盒子和包含下面内容的下部分盒子；

 <div class="container">    // 大盒子
     <div class="up">    // 上部分的小盒子
     </div>
     <div class="down">  //下部分的小盒子
     </div>
 </div>

然后为上部分的盒子添加列表，为下部分的盒子添加内容，内容直接用盒子承载就行：

<div class="container">
        <div class="up">
            <ul>
                <li class="select"><a href="#">百度</a></li>
                <li><a href="#">QQ</a></li>
                <li><a href="#">微信</a></li>
                <li><a href="#">谷歌</a></li>
                <li><a href="#">网易</a></li>
            </ul>
        </div>
        <div class="down">
            <div class="div_select">百度内容</div>
            <div>QQ内容</div>
            <div>微信内容</div>
            <div>谷歌内容</div>
            <div>网易内容</div>
        </div>
    </div>

这里给第一个li标签和第一个承载内容的div添加class是为了让程序默认执行第一个标签的下边框高亮和默认显示第一个内容，当然，具体还要到css中实现。

我们为工程新建一个css文件，并在html文件的<head>标签中通过link标签引入css文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/tab.css"> //这里的名字可能不一样，大家以自己的css名为准
</head>

来到css文件，首先是通过通配符选择器去除浏览器默认边距属性的影响：

*{
    margin: 0;
    padding: 0;
}

然后为整个界面添加一个背景色（rgb数值是随便加的，自己喜欢就行）：

body{
    background-color:rgb(204, 202, 202);
}

然后，我们开始设置整个容器的大小，背景色（最好和body设置的颜色不用，方便区分）并将容器居中：

.container{
    width: 300px;
    height: 200px;
    background-color: #fff;
    margin: 100px auto;
}

设置完整个容器的样式后，我们开始设置上半部分的盒子，主要是给他指定一个范围：

.container .up{
    height: 50px;
    width: 100%;
}

然后，我们要清除列表前的点，并将列表居中：

.container .up ul{
    list-style-type: none;
    text-align: center;
}

然后，设置浮动，让列表内容左右排列：

.container .up ul li{
    float: left;
    width: 60px;
    height: 50px;
    line-height: 50px; /* 这里 行高 == 内容高度 ，能起到上下居中的效果*/

}

然后，去除字体下自带的横线，并设置字体大小：

.container .up ul li a{
    text-decoration: none;
    font-size: 20px;  
}

然后，设置li标签默认的高亮下划线效果：

.select{
    border-bottom: 2px solid orange;
}

到此为止，我们上部分的盒子样式就基本成形，我们开始设置下部分盒子样式，和上部分盒子类似，主要是设置范围并居中：

.container .down{
    width: 100%;
    height: 100px;
    position: relative; // 这里放定位是为了居中放内容做铺垫
    text-align: center;
}

然后，设置承载内容的盒子样式

.container .down div{
    position: absolute; // 这里放定位就能居中
    line-height: 100px;
    height: 100%;
    width: 100%;
    display: none;  // 这里我们将所有盒子都不显示，后面通过指定class默认显示一个盒子内容
}

正如上面所说，我们需要一个默认显示的内容，既然我们的下边框高亮效果指定的列表的第一个内容，那我们也默认显示第一个列表对应的内容，大家可以回看我们的html代码，我提前定义好了第一个<li>标签和承载内容的第一个<div>标签的class。

.container .down .div_select{
    display: block;
}

至此，我们已经书写完了html+css的内容，接下来我们需要书写js内容，实现鼠标事件的内容跳转，首先，我们需要新建一个js文件，例如tab.js,然后在html文件中的内容下方引入js文件，如图：

 <!-- 一定要在网页结构后面引入本地js文件 -->
    <script src="./js/tab.js"></script>

接下来正式书写js文件，首先我们要获取到上面的盒子，然后通过上面的盒子获取到里面的<li>标签：

var lis = document.querySelector(".up").querySelectorAll("li");

按照上面这个思路，我们获取到下半部分的盒子，然后通过下半部分的盒子找到承载内容的盒子：

var divs = document.querySelector(".down").querySelectorAll("div");

然后我们通过for循环添加一个鼠标事件，乍一看逻辑是没有问题的，但是仔细想一下，如果直接用for循环，这个循环值就是一个超过循环边界的固定值，错误写法就不演示了，解决办法就是添加一个闭包，通过闭包保存变量到内存的特性，让我们能随意调用循环范围内的值：

首先，我们还是要写一个for循环，然后写一个自定义函数，通过传参的方式实现本地化：

for(var i=0; i<lis.length; i++){
    // 闭包帮我们把变量保存到内存中
    (function(num){

    }
    })(i)  //这里的(i)也可以写在自定义函数的括号里
}

然后在自定义函数里添加鼠标事件，鼠标事件中为鼠标进入的内容添加高亮下划线:

for(var i=0; i<lis.length; i++){
    // 闭包帮我们把变量保存到内存中
    (function(num){
        lis[num].onmouseenter = function(){
            // 在书写结构时，下划线的高亮效果是通过给指定li添加class,然后在css中为指定class添加高亮效果，js中可通过动态添加class的方式实现选中内容底部边框高亮
            lis[num].setAttribute("class","select");
        }
    })(i)
}

但是，我们运行结果后发现，除了我选中的标签高亮外，其他高亮过的标签依然高亮，这好像与我们的预期不太一样，我们需要清除掉之前高亮过的下边框，但苦于不知道之前高亮过的是哪一个标签，既然如此，那无论你是否高亮过，我们都给你清除一次，添加如下代码用于自定义函数（闭包）中：

 for(var j=0; j<lis.length; j++){
                lis[j].removeAttribute("class");
            }

按照这个思路，我们也为内容清除上一次显示的内容，然后通过添加标签的方式显示<li>标签对应的内容，完整js文件如下：

var lis = document.querySelector(".up").querySelectorAll("li");
var divs = document.querySelector(".down").querySelectorAll("div");

for(var i=0; i<lis.length; i++){
    // 闭包帮我们把变量保存到内存中
    (function(num){
        lis[num].onmouseenter = function(){
            // 因为我们不知道前一个高亮的li是谁，索性就把全部li的class清除，清除前一个li的影响
            for(var j=0; j<lis.length; j++){
                lis[j].removeAttribute("class");
                divs[j].removeAttribute("class");
            }

            // 在书写结构时，下划线的高亮效果是通过给指定li添加class,然后在css中为指定class添加高亮效果，js中可通过动态添加class的方式实现选中内容底部边框高亮
            lis[num].setAttribute("class","select");
            // 同上
            divs[num].setAttribute("class","div_select");
        }
    })(i)
}

完整html文件如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/tab.css">
</head>
<body>
    <div class="container">
        <div class="up">
            <ul>
                <li class="select"><a href="#">百度</a></li>
                <li><a href="#">QQ</a></li>
                <li><a href="#">微信</a></li>
                <li><a href="#">谷歌</a></li>
                <li><a href="#">网易</a></li>
            </ul>
        </div>
        <div class="down">
            <div class="div_select">百度内容</div>
            <div>QQ内容</div>
            <div>微信内容</div>
            <div>谷歌内容</div>
            <div>网易内容</div>
        </div>
    </div>

    <!-- 一定要在网页结构后面引入本地js文件 -->
    <script src="./js/tab.js"></script>
</body>
</html>

完整css文件如下：

*{
    margin: 0;
    padding: 0;
}

body{
    background-color:rgb(204, 202, 202);
}

.container{
    width: 300px;
    height: 200px;
    background-color: #fff;
    margin: 100px auto;
}

.container .up{
    height: 50px;
    width: 100%;
}

.container .up ul{
    list-style-type: none;
    text-align: center;
}

.container .up ul li{
    float: left;
    width: 60px;
    height: 50px;
    line-height: 50px;
}

.container .up ul li a{
    text-decoration: none;
    font-size: 20px;  
}

.select{
    border-bottom: 2px solid orange;
}

.container .down{
    width: 100%;
    height: 100px;
    position: relative;
    text-align: center;
}

.container .down div{
    position: absolute;
    line-height: 100px;
    height: 100%;
    width: 100%;
    display: none;
}

.container .down .div_select{
    display: block;
}