仿京东tab栏切换

最新推荐文章于 2022-11-25 11:36:51 发布

@山海*

最新推荐文章于 2022-11-25 11:36:51 发布

阅读量3.1k

点赞数 4

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_47612165/article/details/108960964

版权

js 专栏收录该内容

21 篇文章 1 订阅

订阅专栏

在这里插入图片描述
仿京东tab导航栏切换

<html lang="en">

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

        body {
            background-color: #eee;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 1000px;
            position: relative;
            left: 50px;
            background-color: #fff;
        }

        .box ul {
            height: 38px;
            line-height: 38px;
            background-color: #f7f7f7;
            border-bottom: 1px solid red;
            overflow: hidden;
        }

        .box ul li {
            float: left;
            padding: 0 15px;
            cursor: pointer;
            font-size: 14px;
            color: #333;
        }

        .box ul li:hover {
            color: #e4393c;
        }

        .content {
            /* position: absolute;
            left: 0;
            top: 40; */
            display: none;
            width: 100%;
            height: 200px;
            background-color: #fff;
        }

        .active {
            background-color: #e4393c;
            color: #fff !important;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- tab导航 -->
        <ul>
            <li index='info'>商品介绍</li>
            <li index="specs">规格与包装</li>
            <li index="Aftermarket">售后保障</li>
            <li index="comment">商品评价(2.2万+)</li>
            <li index="phone">手机社区</li>
        </ul>
        <!-- 内容展示区域 -->
        <!-- 商品介绍 -->
        <div id="info" style="display: block;" class="content">商品介绍</div>
        <!-- 规格与包装 -->
        <div id="specs" class="content">规格与包装</div>
        <!-- 售后与保障 -->
        <div id="Aftermarket" class="content">售后与保障</div>
        <!-- 商品评价 -->
        <div id="comment" class="content">商品评价</div>
        <!-- 手机社区 -->
        <div id="phone" class="content">手机社区</div>
    </div>
    <script>
        var lis = document.querySelectorAll('li')
        var cs = document.querySelectorAll('.content')
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                // 重置所有的li标签为默认样式
                reset()
                // 设置当前单击的li标签为active
                this.className = 'active'
                // 重置所有的content 为隐藏
                resetContent()
                // 设置当前单击的li标签对应的content显示
                var index = this.getAttribute('index')
                document.querySelector(`#${index}`).style.display = 'block'

                /*var txt = this.innerHTML
                console.log(txt);
                if (txt == '商品介绍') {
                    document.querySelector('#info').style.display = 'block'
                } else if (txt == '规格与包装') {
                    document.querySelector('#specs').style.display = 'block'
                }else if (txt == '售后保障') {
                    document.querySelector('#Aftermarket').style.display = 'block'
                }else if (txt == '商品评价(2.2万+)') {
                    document.querySelector('#comment').style.display = 'block'
                }else if (txt == '手机社区') {
                    document.querySelector('#phone').style.display = 'block'
                }*/
            }
        }

        // 重置所有li标签的样式为默认样式
        function reset() {
            for (var i = 0; i < lis.length; i++) {
                lis[i].className = ''
            }
        }
        function resetContent() {
            for (var j = 0; j < cs.length; j++) {
                cs[j].style.display = 'none'
            }
        }
    </script>
</body>

</html>

@山海*

关注

4
点赞
踩
13

收藏

觉得还不错? 一键收藏
3
评论
仿京东tab栏切换

仿京东tab导航栏切换<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0;.
复制链接

扫一扫

专栏目录