(JavaScript)JS之Tab栏切换代码详解

土豆777

已于 2024-03-22 22:39:12 修改

阅读量828

点赞数 7

文章标签： javascript 前端

于 2024-03-21 23:56:55 首次发布

本文链接：https://blog.csdn.net/2301_80460842/article/details/136923475

版权

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            /* 文字样式：无 */
            text-decoration: none;
        }
        
        li {
            /* 列表的样式：无 */
            list-style: none;
        }
        
        ul::after {
            /* 无序表的末尾添加的设置 */
            display: block;
            content: '';
            clear: both;
        }
        
        ul li {
            /* 无序表的每个li元素的样式设置 */
            float: left;
            margin-right: 5px;
            background-color: skyblue;
        }
        
        ul li:first-child {
            /* 无序表的第一个li元素，进页面会先呈现该页面，故先将其选项卡设置一个样式 */
            background-color: #ccc;
        }
        
        h2 {
            text-align: center;
        }
        
        ul li a {
            display: inline-block;
            font-size: 20px;
            text-align: center;
            width: 200px;
            height: 50px;
            line-height: 50px;
            color: #000;
        }
        /* 选项区域 */
        
        .optionArea {
            position: relative;
        }
        
        .optionArea div {
            position: absolute;
            top: 10px;
            width: 1220px;
            height: 500px;
            background-color: pink;
            display: none;
        }
        
        .optionArea div:first-child {
            display: block;
        }
    </style>
</head>
 
<body>
    <ul>
        <!-- 利用标签a给选项打上标签,因为a标签需要有href，但这里不希望网页有其他的多余的动作，故写了一句什么也不执行的语句在href后 -->
        <li><a href="javascript:;">选项一</a></li>
        <li><a href="javascript:;">选项二</a></li>
        <li><a href="javascript:;">选项三</a></li>
        <li><a href="javascript:;">选项四</a></li>
        <li><a href="javascript:;">选项五</a></li>
        <li><a href="javascript:;">选项六</a></li>
    </ul>
    <!-- 将每个标签下的内容归为一类 -->
    <section class="optionArea">
        <div>
            <h2>标题1</h2>
        </div>
        <div>
            <h2>标题2</h2>
        </div>
        <div>
            <h2>标题3</h2>
        </div>
        <div>
            <h2>标题4</h2>
        </div>
        <div>
            <h2>标题5</h2>
        </div>
        <div>
            <h2>标题6</h2>
        </div>
    </section>
 
 
    <script>
        var lis = document.querySelectorAll('li');//事件三要素：1、获取事件源 querySelectorAll相当于获取的是一个事件源数组
        var divs = document.querySelectorAll('div');
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function() {//事件三要素：2、事件类型，此处为onclick点击型 | 3、执行事件：选项卡的成员依次执行执行function函数里的操作
                for (let i of lis) {
                    i.style.backgroundColor = 'skyblue';
                }//遍历选项卡，让每一个选项卡底色都先呈现天蓝色
                this.style.backgroundColor = '#ccc';//此处传入函数的this对应的是点击的那个选项卡，将其底色变为灰色
                for (let i of divs) {
                    i.style.display = 'none';
                }//将所有选项卡对应的内容都先隐藏---display:'none'
                divs[i].style.display = 'block';//只显示出点击了的选项卡的内容---display:'block'
            }
        }
    </script>
</body>
 
</html>

代码来源：JavaScript之tab栏切换_js tab切换-CSDN博客

总结知识点：

1、伪元素::after—>用于在css渲染中向元素逻辑上的尾部添加内容

参考学习文章：::after (:after) - CSS：层叠样式表 | MDN

2、display:

display:block---块级展示，会换行，可修改宽高

display:inline---行内元素，不换行，不可修改宽高

display:inline-block---行内元素，但可修改宽高

display:none---不展示

3、for...of... & for...in...

for(let i in list)——数组，字符串输出下标，对象输出键名

for(let i of list)——数组，字符串依次输出内容，遍历对象会报错