页签切换效果

G寒塘鹤影X
948 阅读2分钟

页签切换的使用在页面中使用较为广泛，在我们日常使用的浏览器顶部，也设置有页签，当在浏览器中同时打开多个页面时，页面将会以页签的方式显示在浏览器的顶部，用户可根据需要点击自己想要浏览的页签，从而浏览该页签下的内容

1. 先搭建出页面的静态效果，如下图所示

<body>
    <div class = 'box'>
        <ul class = 'title'>
            <li class = 'active'>页签一</li>   // 给第一个li标签添加默认高亮效果
            <li>页签二</li>
            <li>页签三</li>
        </ul>
        <ul class = 'content'>
            <li>
                <h1>页面一</h1>
            </li>
            <li>
                <h1>页面二</h1>
            </li>
            <li>
                <h1>页面三</h1>
            </li>
        </ul>
    </div>
</body>

2.对刚刚所搭建出的静态页面进行CSS样式设置

// 初始化页面
*{
    margin: 0;
    padding: 0;
    list-style: none;
}

.box{
    width: 500px;
    height: 300px;
    border: 1px solid red;
    border-radius: 10px;
    overflow: hidden;   // 对box内的内容设置溢出隐藏
}
.title{
    display: flex;   // 对其内部的li元素进行弹性布局
    border-bottom: 1px solid red;
}
.title li{
    padding: 10px 0;   // 给li设置一个垂直方向上的内边距，从而完成文字的垂直居中
    flex: 1;   // 使li元素在title内部均匀分布
    text-align: center;
}

// 当鼠标悬浮在title下的li标签时为其添加active的效果
.title li:hover,
.title .active{
    background: orangered;
    color: white;
    cursor: pointer;
}

.content li{
    height: 270px;   // 使content内的每个li标签独占content
}

3.通过js代码完成active的动态设置，从而完成页签的切换效果

<script>
    // 获取title中的li元素
    let titles = document.getElementsByClassName('title')[0].children;
    // 获取content中的li元素
    let contents = document.getElementsByClassName('content')[0].children;
    
    for(let i = 0; i < titles.length; i++){
        const item = titles[i];
        item.onmouseenter = function(){
            for(let j = 0; j < contents.length; j++){
                // 当j与i相等时，content[j]显示，反之则消失不显示
                contents[j].style.display = j === i ? 'block' : 'none';
            }
            let activeTitle = document.getElementsByClassName('active')[0];
            // 去除之前的active效果，为新的li标签添加active效果
            activeTitle.classList.remove('active');
            this.classList.add('active');
        }
    }
</script>

该实例将box设置为内容溢出隐藏，因此content内部的li标签不会同时显现，每次只会显示一个li标签中的内容

当鼠标悬浮在页签二时，content内将显示与其对应的页面二的内容，此时页面一和页面三的内容均为 'display：none' 不做显示，同时box的 'overflow:hidden' 属性可使页面在刚加载出，且鼠标并未悬浮在页签上时，对溢出的页面二和页面三内容进行隐藏

avatar
文章
阅读
粉丝