选项卡插件制作指南-CSDN博客

本文链接：https://blog.csdn.net/L_Lintellect/article/details/99753447

使用前

/*
tab(boxId, boxWidth, tabList)
参数说明：
    *boxId：需要做选项卡的盒子的ID名字，
    *boxWidth：盒子的宽度，高度自适应；
    *tabList：选项卡的选项。
*本插件的选项是通过渲染的方式生成的。
*盒子需要复制。
    *第n个选项卡
*/
/*
此插件的使用，
第一步：复制html结构，注意选项和盒子数量要相互匹配
第二步：复制样式代
第三步：引入js（插件）调用即可，tab()。
*/

实例：
第一步：先引入js(插件)
第二步：tab(‘box2’, ‘350’, [‘选项1’, ‘选项2’, ‘选项3’,‘1’); 调用
第三步：复制结构。

        <div class="silde_nav"></div>
        <div class="boxCon" style="display: block;">
            <p>盒子1</p>
        </div>
        <div class="boxCon">
            <p>盒子2</p>
        </div>
        <div class="boxCon">
            <p>盒子3</p>
        </div>

此选项卡是文档中的第一个选项卡，有三个选项，因此留三个盒子。再复制样式即可。

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>选项卡（tab切换）</title>
    <link rel="stylesheet" href="../css/tab.css">
</head>

<body>
    <div id="box">
        <div id="box2">
            <div class="silde_nav">
                <!-- <li class="navlist"><a href="###">精选</a></li>
                <li><a href="###">社会</a></li>
                <li><a href="###">娱乐</a></li>
                <li><a href="###">生活</a></li>
                <li><a href="###">体育</a></li> -->
            </div>
            <div class="boxCon" style="display: block;">
                <p>盒子1</p>
            </div>
            <div class="boxCon">
                <p>盒子2</p>
            </div>
            <div class="boxCon">
                <p>盒子3</p>
            </div>
            <div class="boxCon">
                <p>盒子4</p>
            </div>
            <div class="boxCon">
                <p>盒子5</p>
            </div>
        </div>
    </div>

</body>

</html>
<script src="../js/tab.js"></script>
<script>

    tab('box2', '350', ['选项1', '选项2', '选项3', '选项4', '选项5'], '1');
    /*
    tab(boxId, boxWidth, tabList)
    参数说明：
        *boxId：需要做选项卡的盒子的ID名字，
        *boxWidth：盒子的宽度，高度自适应；
        *tabList：选项卡的选项。
        *第n个选项卡
    */
    /*
    此插件的使用，
    第一步：复制html结构，
    第二步：复制样式代
    第三步：引入js（插件）调用即可，tab()。
    */

</script>

tab.js


function tab(boxId, boxWidth, tabList, n) {
    //参数部分
    let box2 = document.getElementById(boxId);
    let ttList = tabList;   //各选项
    let lw = boxWidth;  //盒子width
    box2.style.width = lw + 'px';
    let silde_nav = document.getElementsByClassName('silde_nav')[n - 1];
    // console.log(silde_nav);
    let html = '';
    for (let i = 0; i < ttList.length; i++) {
        html += `<li style="width:${(lw - 2) / ttList.length + 'px'}"><a href="###">${ttList[i]}</a></li>`;
    }
    silde_nav.innerHTML = html; //渲染选项
    // let aList = silde_nav.getElementsByTagName('li');  //d读取到选项卡

    let cons = box2.getElementsByClassName('boxCon');  //内容

    let btns = silde_nav.getElementsByTagName('li'); //菜单栏
    // console.log(btns);
    for (let i = 0; i < btns.length; i++) {
        btns[i].index = i;
        btns[i].onclick = function () {
            for (let j = 0; j < btns.length; j++) {
                btns[j].className = '';
                cons[j].style.display = 'none';
            }
            this.className = 'navlist';
            cons[this.index].style.display s= 'block';
        }
    }
}

tab.css

html,
body {
  width: 100%;
  height: 100%;
}

ul,
li{
  list-style: none;
}
a{
  text-decoration: none;  
  color: black;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

#box {
  width: 400px;
}

#box2 {
  border: 1px solid #cacaca;
}

.boxCon {
  display: none;
}

.silde_nav {
  width: 100%;
  height: 44px;
}

.silde_nav li {
  height: 100%;
  float: left;
  position: relative;
}

.silde_nav li a {
  display: block;
  box-sizing: content-box;
  position: absolute;
  bottom: 0px;
  height: 42px;
  line-height: 42px;
}

.silde_nav li a:hover {
  color: #0aa770;
}

.navlist a {
  color: #0aa770;
  border-top: 2px solid  #0aa770;
}

p {
  width: 100%;
  height: 200px;
  font-size: 30px;
  line-height: 200px;
  text-align: center;
  border: 1px solid #0aa770;
}