JS实现选项卡以及跳转到选项卡页面时选项卡显示对应内容

实现效果
在这里插入图片描述
当点击对应的导航时，下方显示对应的内容，并且导航的样式发生改变。也就是点击导航一，下方只显示内容一，而其它的内容不可见。

实现思路
将内容样式设置为display:none;，在点击导航时，触发一个onclick事件使得内容的样式变为display：block;,并且给导航添加一个class名，赋予新的样式。

1. 基础界面
也就是上方的图片代码

html代码

<body class="body">
    <div class="tab" id="tab">
        <ul>
            <li>导航一</li>
            <li>导航二</li>
            <li>导航三</li>
            <li>导航四</li>
            <li>导航五</li>
        </ul>
    </div>
    <div class="card" id="card">
        <div class="content">
            内容一
        </div>
        <div class="content">
            内容二
        </div>
        <div class="content">
            内容三
        </div>
        <div class="content">
            内容四
        </div>
        <div class="content">
            内容五
        </div>
    </div>
</body>

css代码

* {
    padding: 0;
    margin: 0;
}
.body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.tab {
    width: 50%;
    height: 50px;
    float: left;
    border: 1px solid rgb(19, 136, 214);
}
.tab li{
    float: left;
    width: 20%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    color: #fff;
    background-color: rgb(19, 136, 214);
    list-style: none;
}
.tab li:hover {
    float: left;
    width: 20%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    color: rgb(19, 136, 214);
    background-color: #fff;
    list-style: none;
}
.card {
    width: 50%;
    height: 50%;
    font-size: 30px;   
}

2.选项卡技术实现
首先，需要将所有的内容隐藏，然后为导航添加onclick事件，在onclick事件中通过for循环来遍历每一个li以及content，通过遍历得到每一个元素然后对其的样式进行修改。

实现效果图

新添加的css代码

.content {
    display: none;
}
.tab li.pu {
    float: left;
    width: 20%;
    height: 100%;
    text-align: center;
    line-height: 50px;
    color: rgb(19, 136, 214);
    background-color: #fff;
    list-style: none;
}

js代码

window.onload = function () {
    var tab = document.getElementById('tab');
    //通过id获取tab元素
    var li = tab.getElementsByTagName('li');
    //获取tab元素中的所有li元素
    var card = document.getElementById('card');
    //通过id获取card元素
    var content = card.getElementsByClassName('content');
    //获取card元素下的所有content元素

    for (let i = 0; i < li.length; i++) {//定义一个变量i=0，让其小于li元素的个数
        li[i].onclick = function () {//为每一个li都添加一个onclick点击事件
            for (let e = 0; e < li.length; e++) {//该for循环使每一个li的class为空content的display为none
                li[e].className = "";            //每触发点击事件时，会清除之前被点击的li的样式并隐藏之前显示的content
                content[e].style.display = "none";
            }
            li[i].className = "pu";//为li添加一个为up的class
            content[i].style.display = "block";//使得content的display为block
        }
    }
}

3.页面跳转显示对应的选项卡内容技术实现
首先新创建一个页面并在a标签中添加一个参数，点击a标签页面跳转后参数会出现在选项卡页面的href中，然后通过正则表达式截取到上一个页面传过来的参数，通过for循环遍历使得与参数对应的li和content的样式发生改变。

实现效果图
在这里插入图片描述

首页html代码

<div class="">
        <ul>
            <li>
                首页导航一
                <div>
                    <ul>
                        <li><a href="./index.html?O=0">导航一</a></li>
                        <li><a href="./index.html?O=1">导航二</a></li>
                        <li><a href="./index.html?O=2">导航三</a></li>
                        <li><a href="./index.html?O=3">导航四</a></li>
                        <li><a href="./index.html?O=4">导航五</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>

整体js代码

window.onload = function () {
    var tab = document.getElementById('tab');
    //通过id获取tab元素
    var li = tab.getElementsByTagName('li');
    //获取tab元素中的所有li元素
    var card = document.getElementById('card');
    //通过id获取card元素
    var content = card.getElementsByClassName('content');
    //获取card元素下的所有content元素

    function getParams(name, href) {
        var href = href || window.location.href,
            value = '';

        if (name) {
            var reg = new RegExp(name + '=([^&]*)', 'g');
            href.replace(reg, function ($0, $1) {
                value = decodeURI($1);
            });
        } else {
            value = {};
            var reg = /\b(\w+)=([^\/&]*)/g;
            href.replace(reg, function ($0, $1, $2) {
                value[$1] = decodeURI($2);
            });
        }
        return value;
    };
    getParams();
    var O = getParams("O");
    for (let i = 0; i < li.length; i++) {//定义一个变量i=0，让其小于li元素的个数  
        li[O].className = "pu";
        content[i].style.display = "block" ;
        li[i].onclick = function () {//为每一个li都添加一个onclick点击事件 
            for (let e=0; e <li.length; e++) {//该for循环使每一个li的class为空，content的display为none 
                li[e].className=""; //每触发点击事件时，会清除之前被点击的li的样式并隐藏之前显示的content 
                content[e].style.display="none" ; 
            } 
            li[i].className="pu";//为li添加一个为up的class 
            content[i].style.display="block" ;//使得content的display为block 
        } 
    } 
}

以上所述，如有错误，请留言指正。

原文链接：https://blog.csdn.net/Menkongkong/article/details/107364751