js-tab栏切换

最新推荐文章于 2024-05-07 11:25:37 发布

前端笨鸟

最新推荐文章于 2024-05-07 11:25:37 发布

阅读量277

点赞数

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

本文链接：https://blog.csdn.net/qq_41670147/article/details/103235724

版权

js特效专栏收录该内容

18 篇文章 0 订阅

订阅专栏

鼠标点击上面相应的选项卡（tab），下面内容跟随变化

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .tab {
            width: 990px;
            min-height: 220px;
        }
        
        .tab_nav {
            display: inline-block;
            display: block;
            position: relative;
            height: 40px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
        }
        
        .tab_nav li {
            position: relative;
            display: inline-block;
            padding: 10px 25px;
            font-family: "microsoft yahei";
            cursor: pointer;
            font-size: 14px;
        }
        
        .tab_nav li.current {
            background: #e4393c;
            color: #fff;
        }
        
        .item {
            display: none;
        }
        
        .tab_cont {
            padding: 10px 25px;
        }
    </style>
</head>

<body>
    <div class="tab">
        <ul class="tab_nav">
            <li class="current">商品介绍</li>
            <li>规格与包装</li>
            <li>售后保障</li>
            <li>商品评价</li>
            <li>好评商品</li>
        </ul>
        <div class="tab_cont">
            <div class="item" style="display:block;">
                商品名称：立白洗衣液
            </div>
            <div class="item">
                包装单位:瓶装
            </div>
            <div class="item">
                本产品全国联保，享受三包服务，质保期为：无质保
            </div>
            <div class="item">
                赶上活动非常便宜的价格入手的，立白老牌子了家里的洗洁精，洗衣皂都是立白的，都特别好用，这款洗衣液有除菌除螨的功效，太合适一般家庭用了，省去了用衣物消毒液的步骤，可方便啦，天然茶籽配方，温和无刺激，无皮肤不适感，淡淡的香味，不刺鼻，自然清新很好闻，无荧光增白剂，无残留，全家衣物都可以洗，易漂易洗，省水又省力，机洗手洗都适合
            </div>
            <div class="item">
                本店好评商品:立白天然亮白低泡洗衣液（袋装）2kg 易漂易洁 深层去渍
            </div>
        </div>
    </div>
    <script>
        var li = document.querySelector('.tab_nav').querySelectorAll('li');
        var items = document.querySelectorAll('.item');
        for (var i = 0; i < li.length; i++) {
            li[i].setAttribute('index', i);
            li[i].onclick = function() {
                for (var i = 0; i < li.length; i++) {
                    li[i].removeAttribute('class');
                    items[i].removeAttribute('style');
                }
                this.className = 'current';
                var index = this.getAttribute('index');
                items[index].setAttribute('style', 'display:block');

            }
        }
    </script>
</body>

</html>

在这里插入图片描述

前端笨鸟

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js-tab栏切换

鼠标点击上面相应的选项卡（tab），下面内容跟随变化<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...
复制链接

扫一扫

专栏目录