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>

巴特西

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

最新文章

热门文章