JS / JQ 简单实现tab栏

效果图：

原理：

放置两个<ul>，一个是作为头部导航栏，另一个作为内容部分，且内容部分的li初始化为display="none"。当点击导航栏中的一个选项时，通过排他思想，该选项所对应的那一块内容的display属性设为block，即显示该li的内容；而其他li的display属性则设置为none。另外，使用了H5自定义属性，方便我们得知用户点击的是哪个导航栏选项。

原生JS实现代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用style修改样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab_header {
            list-style: none;
            overflow: hidden;
            cursor: pointer;
        }

        .tab_title {
            float: left;
            height: 40px;
            width: 150px;
            text-align: center;
            line-height: 40px;
            background-color: rgb(194, 194, 194);

        }

        .tab_item {
            display: none;
        }

        .red {
            background-color: red;
            color: white;
        }
    </style>
</head>

<body>
    <ul class="tab_header">
        <li class="tab_title" data-index="0">商品介绍</li>
        <li class="tab_title" data-index="1">规格与包装</li>
        <li class="tab_title" data-index="2">售后保障</li>
        <li class="tab_title" data-index="3">商品评价</li>
        <li class="tab_title" data-index="4">手机专区</li>
    </ul>
    <ul class="tab_content">
        <li class="tab_item">商品介绍模块</li>
        <li class="tab_item">规格与包装模块</li>
        <li class="tab_item">售后保障模块</li>
        <li class="tab_item">商品评价模块</li>
        <li class="tab_item">手机社区模块</li>
    </ul>
    <script>
        var titles = document.querySelectorAll('.tab_title');
        var items = document.querySelectorAll('.tab_item');
        //循环给每个tab_title添加事件
        for (var i = 0; i < titles.length; i++) {
            titles[i].onmouseover = function () {
                for (var j = 0; j < titles.length; j++) {
                    titles[j].className = 'tab_title';
                }
                this.className = 'tab_title red';
            }
            titles[i].onmouseout = function () {
                for (var j = 0; j < titles.length; j++) {
                    titles[j].className = 'tab_title';
                }
            }
            titles[i].onclick = function () {
                var index = this.getAttribute('data-index');
                for (var j = 0; j < items.length; j++) {
                    console.log(items[j].style.display);
                    items[j].style.display = 'none';
                }
                items[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

Jquery 实现代码（需要引入jq文件）：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 使用style修改样式 -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tab_header {
            list-style: none;
            overflow: hidden;
            cursor: pointer;
        }

        .tab_title {
            float: left;
            height: 40px;
            width: 150px;
            text-align: center;
            line-height: 40px;
            background-color: rgb(194, 194, 194);

        }

        .tab_item {
            display: none;
        }

        .red {
            background-color: red;
            color: white;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>

<body>
    <ul class="tab_header">
        <li class="tab_title" data-index="0">商品介绍</li>
        <li class="tab_title" data-index="1">规格与包装</li>
        <li class="tab_title" data-index="2">售后保障</li>
        <li class="tab_title" data-index="3">商品评价</li>
        <li class="tab_title" data-index="4">手机专区</li>
    </ul>
    <ul class="tab_content">
        <li class="tab_item">商品介绍模块</li>
        <li class="tab_item">规格与包装模块</li>
        <li class="tab_item">售后保障模块</li>
        <li class="tab_item">商品评价模块</li>
        <li class="tab_item">手机社区模块</li>
    </ul>
    <script>
        $(function () {
            $('.tab_title').mouseover(function () {
                $(this).addClass('red').siblings('li').removeClass('red');
            });
            $('.tab_title').mouseout(function () {
                $(this).removeClass('red');
            });
            $('.tab_title').click(function () {
                var index = $(this).index();
                $('.tab_item').eq(index).css('display', 'block').siblings('li').css('display', 'none');
            });
        })
    </script>
</body>

</html>

JS / JQ 简单实现tab栏

猜你喜欢