选项卡（练习）_csdn选项卡-CSDN博客

本文链接：https://blog.csdn.net/m0_60979337/article/details/128470510

解题思路：

利用索引改变标签的className

<!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>
        li{
            list-style: none;
        }
       .tab{
        width: 800px;
       }
       .tab>ul{
        display: flex;
       }
       .tab>ul>li{
        width: 150px;
        height: 35px;
        border: 1px solid gray;
        line-height: 35px;
        text-align: center;
        cursor: pointer;
       }
       /* 点击后的li 背景色样式 */
       .tab>ul>li.active{
        color: #fff;
        background-color: gray;
       }
       .tab>div{
        /* 一般状态下隐藏 */
        display: none;
        height: 150px;
        border: 1px solid gray;
        text-align: center;
        line-height: 150px;
        font-size: 30px;
       }
       /* 激活状态下显示 */
       .tab>div.active{
        display: block;
       }
    </style>
</head>
<body>
    <div class="tab">
        <ul>
            <li data-index = "0" class="active">tab1</li>
            <li data-index = "1">tab2</li>
            <li data-index = "2">tab3</li>
        </ul>
        <div class="active">tab1.content</div>
        <div>tab2.content</div>
        <div>tab3.content</div>
    </div>
    <script>
        var divs = document.querySelectorAll(".tab>div");
        var ul = document.querySelector(".tab>ul");
        var lis = document.querySelectorAll("li");
        //用事件委托 给li添加点击事件
        ul.onclick = function(e){
            //如果是li标签 则激活点击的li和div
            if(e.target.tagName === "LI"){
                //定义一个li 标签的索引变量 
                var index = e.target.dataset.index;
                //去掉所有的div和li的类名
                for(var i = 0 ;i <divs.length ; i++){
                    divs[i].classList.remove("active");
                    lis[i].classList.remove("active");
                }
                //给当前点击的索引增加active类名
                divs[index].classList.add("active");
                lis[index].classList.add("active");
            }  
          
        }
    </Script>
</body>
</html>

运用DOM 封装

封装的JS

//构造一个函数Tab 传入选项卡的数据
/**
 * option 一个对象 里面包含class类名 标签标题和标签内容
 * @param {*} option { //el 为class 类名  data  为标签标签和标签内容的数组 hover (true 为鼠标移入时间)
 * }
 */
function Tab(option) {
    this.option = option;
}
//在tab 的原型上创建一个函数 (在u-tab上 创建ul 和div 标签)
Tab.prototype.create = function () {
    // 先获取标签对象上类名 的DOM
    var tab = document.querySelector(this.option.el);
    //在u-tab的DOM上创建 ul 和div
    var ul = document.createElement("ul");
    var div = document.createElement("div");
    //根据传入的option中的data 创建ul中li的内容
    var listr = " ";
    var divstr = " "; // div中的内容也是根据data 数组中的内容进行拼接
    //先判断传入的是否为一个数组 且 获取到 ul-tab
    if (Array.isArray(this.option.data) && tab) {
        //如果满足条件 则遍历data数组  item数组的内容 i 数组的索引
        this.option.data.forEach((item, i) => {
            //如果索引为第一位（0）时，则在li和div的标签上添加active类名
            if (i === 0) {
                listr += "".concat("<li class = 'active' data-index = '", i, "'>", item.title, "</li>");
                divstr += "".concat("<div class = 'content active'>", item.content, "</div>");
            } else {
                listr += "".concat("<li  data-index = '", i, "'>", item.title, "</li>");
                divstr += "".concat("<div class = 'content'>", item.content, "</div>");
            }
        });
    }
    ul.innerHTML = listr;
    div.innerHTML = divstr;
    //把ul div元素添加到tab中
    tab.appendChild(ul);
    tab.appendChild(div);
    //调用JS方法
    this.handleEvent();
}
//封装JS 方法 
Tab.prototype.handleEvent = function () {
    //默认是点击事件
    var eventType = "onclick";
    if(this.option.hover){
        eventType = "onmouseover";
    }
    //判断事件  如果hover是true 则是点击事件 否则是鼠标移入

    //获取DOM
    var ul = document.querySelector(this.option.el + ">ul") // --> u-tab下面的ul
    var divs = document.querySelectorAll(this.option.el + " .content")
    var lis = document.querySelectorAll(this.option.el + ">ul>li")
    // 运用时间委托 给ul中的Li 添加点击事件
    ul[eventType] = function (e) {
        if (e.target.tagName === "LI") {
            //如果 为li  则输出li标签的索引
            var index = e.target.dataset.index;

            //给li 和 div  去除active类名
            for (var i = 0; i < lis.length; i++) {
                divs[i].classList.remove("active");
                lis[i].classList.remove("active");
            }
            //给当前索引添加active
            divs[index].classList.add("active");
            lis[index].classList.add("active");
        }
    }
}

封装CSS

li{
    list-style: none;
}
.u-tab{
width: 800px;
}
.u-tab>ul{
display: flex;
}
.u-tab>ul>li{
width: 150px;
height: 35px;
border: 1px solid gray;
line-height: 35px;
text-align: center;
cursor: pointer;
}
/* 点击后的li 背景色样式 */
.u-tab>ul>li.active{
color: #fff;
background-color: gray;
}
.u-tab .content{
/* 一般状态下隐藏 */
display: none;
height: 150px;
border: 1px solid gray;
text-align: center;
line-height: 150px;
font-size: 30px;
}
/* 激活状态下显示 */
.u-tab .content.active{
display: block;
}

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/utils2.css">
</head>

<body>
    <div class="u-tab" id = "taba"></div>
    <script src="./js/utils2.js"></script>
    <script>
        new Tab({
            el: "#taba",
            hover:"true",
            data: [
                { title: "tab1", content: "tab1.Content" },
                { title: "tab2", content: "tab2.Content" },
                { title: "tab3", content: "tab3.Content" },
            ]
        }).create()
    </script>
</body>

</html>