tab栏切换（JS）

最新推荐文章于 2023-11-27 16:23:39 发布

米咪米

最新推荐文章于 2023-11-27 16:23:39 发布

阅读量174

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_52063946/article/details/118770384

版权

JavaScript 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

一、功能：

1、点击每个 li 时，改变其背景色和字体颜色，

2、并且在下方显示相应的内容

二、核心算法：（排他思想）

1、当我们点击每个小 li 之前，先给每个小Li设置一个索引号

2、点击小 li 时，我们先把所有 li 的背景样式都清空（干掉所有人）

3、设置当前 li 的背景样式（留下我自己）

4、用 index 记住当前 li 的索引号

5、同样，我们先把所有的内容模块都设置为不可见（display: none）

6、设置当前 li 的内容块为可见（display: block）

三、实现代码：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 990px;
            margin: 100px auto;
            position: relative;
        }
        
        .h {
            width: 100%;
            height: 38px;
            background-color: #f7f7f7;
            border: 1px solid #eee;
            border-bottom: 1px solid #e4393c;
            display: inline-block;
            display: block;
            color: #666;
        }
        
        .h ul li {
            float: left;
            cursor: pointer;
            list-style-type: none;
            padding: 10px 25px;
            font-size: 14px;
        }
        
        .current {
            background-color: #e4393c;
            color: #fff;
            cursor: default;
        }
        
        .hide {
            display: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="h">
            <ul>
                <li class="current">
                    商品介绍
                </li>
                <li>
                    规格与包装
                </li>
                <li>
                    售后保障
                </li>
                <li>
                    商品评价(2万)
                </li>
                <li>
                    预约说明
                </li>
            </ul>
        </div>
        <div class="b">
            <div class="item" style="display: block;">商品介绍</div>
            <div class="item hide">规格与包装</div>
            <div class="item hide">售后保障</div>
            <div class="item hide">商品评价(2万)</div>
            <div class="item hide">预约说明</div>
        </div>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        var items = document.querySelectorAll('.item');

        for (var i = 0; i < lis.length; i++) {
            // 给5个Li设置索引号
            lis[i].setAttribute('index', i);
            // console.log(lis[i].getAttribute('index'));

            lis[i].onclick = function() {

                // 清除所有li的current样式
                for (var j = 0; j < lis.length; j++) {
                    lis[j].className = '';
                }
                this.className = 'current';

                // 设置所有的items内容块为不可见
                for (var k = 0; k < items.length; k++) {
                    items[k].style.display = 'none';
                }

                //获取当前点击的Li的索引号 
                var index = this.getAttribute('index');
                items[index].style.display = 'block';
            }
        }
    </script>
</body>



</html>

四、实现效果：

米咪米

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab栏切换（JS）

一、功能：1、点击每个 li 时，改变其背景色和字体颜色，2、并且在下方显示相应的内容二、核心算法：（排他思想）1、当我们点击每个小 li 之前，先给每个小Li设置一个索引号2、点击小 li 时，我们先把所有 li 的背景样式都清空（干掉所有人）3、设置当前 li 的背景样式（留下我自己）4、用index 记住当前 li 的索引号5、同样，我们先把所有的内容模块都设置为不可见（display:none）6、设置当前 li 的内容块为可见（display:bloc...
复制链接

扫一扫