JavaScript CSS 实现简单的 TAB 标签切换

使用CSS隐藏所有tab页,然后使用JavaScript给选中的元素对应ID的tab页设置class="active"类来显示该元素,以此实现tab切换。
如鼠标放置到shwww时,其data-id对应的属性为#cate1,然后使用选择器选中该id对应的元素并设置类属性,完整demo代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<style>
    .tab-index, .tab {
        list-style: none;
    }
    .tab-index li {
        display:inline-block;
        border: 1px black solid;
    }
    /* 先隐藏所有的tab标签元素 */
    .tab ul {
        display: none;
    }
    /* 显示激活的(class='active')tab标签 */
    .tab .active {
        display: block;
    }
</style>

<!-- tab标签 -->
<ul class="tab-index">
    <li data-id="#cate1">shwww</li>
    <li data-id="#cate2">warchina</li>
    <li data-id="#cate3">ldf</li>
</ul>

<!-- 详细内容 -->
<div class="tab">
    <ul id="cate1">
        <li>https://www.shwww.net</li>
    </ul>
    <ul id="cate2">
        <li>http://www.warchina.com</li>
    </ul>
    <ul id="cate3">
        <li>https://www.ldfldf.com</li>
    </ul>

</div>

<script>
    // 页面加载时,选中第一个元素并为其设置 class="active" ,使第一个元素可以显示
    document.querySelector('.tab ul:first-child').setAttribute('class', 'active'
    );
    // 响应事件,鼠标移动或者点击元素时的事件处理函数
    const eventHandler = function (event) {
        document.querySelector('.tab .active').removeAttribute('class'); // 先将之前显示的标签隐藏
        const targetId = event.target.dataset['id']; // 取得需要显示的tab的 id
        document.querySelector(targetId).setAttribute('class', 'active'); // 显示该id的tab标签
    };

    const elements = document.querySelectorAll('.tab-index li'); // 选中所有需要绑定响应事件的元素
    for (let i = 0; i < elements.length; i++) {
        elements[i].addEventListener('mouseover', eventHandler);  // 绑定事件处理函数
    }
</script>

</body>
</html>
posted @ 2019-03-05 16:11  隔壁老王python  阅读(951)  评论(0编辑  收藏