排他思想+tab栏切换案例

最新推荐文章于 2023-05-17 11:28:21 发布

忧郁火龙果

最新推荐文章于 2023-05-17 11:28:21 发布

阅读量207

点赞数

分类专栏： JS基础文章标签： javascript html 前端

本文链接：https://blog.csdn.net/LQlove1/article/details/125192803

版权

JS基础专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、排他思想

清除所有列表的样式
给点击的事件加上样式

代码演示：

<!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>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        // 核心思想
        // 干掉别人，留下自己
        var btns = document.querySelectorAll('button');
        // 遍历每一个按钮，添加事件
        for(var i = 0 ; i < btns.length ; i++){
            btns[i].onclick = function(){
                // 清除所有样式(干掉所有人)
                for(j = 0 ; j < btns.length ; j++){
                    btns[j].style.backgroundColor = '';
                }
                // 改变颜色(给自己样式)
                this.style.backgroundColor = 'red';
            }
        }
    </script>
</body>
</html>

展示结果：
请添加图片描述

二、tab栏切换

利用排他思想给nav_list添加点击效果
给nav_list添加索引，用setAttribute给每个li添加index
每个nav_list的索引匹配到每个text_list的内容

代码演示：

<!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>
</head>
<style>
    * {
        margin: 0%;
        padding: 0%;
    }

    .container {
        width: 538px;
        height: 250px;
        background-color: rgb(239, 237, 234);
    }

    .nav_list {
        height: 38px;
        background-color: #f7f7f7;
        border: 1px solid #eee;
        border-bottom: 1px solid #e4393c;
    }
    /* li标签的样式 */
    .nav{
        width: auto;
        height: 38px;
        float: left;
        list-style: none;
        box-sizing: border-box;
        padding: 0px 20px 0px 20px;
        line-height: 38px;
        cursor: pointer;
        text-decoration: none;
        color: #666;
    }
    /* 隐藏content内容 */
    .hidden{
        display: none;
    }
    /* 点击后的样式 */
    .current {
        background-color: #e4393c;
        color: white;
    }
    .appear{
        display: block;
    }
</style>

<body>
    <div class="container">
        <ul class="nav_list">
            <li class="nav current">商品介绍</li>
            <li class="nav">规格与包装</li>
            <li class="nav">售后保障</li>
            <li class="nav">商品评价</li>
            <li class="nav">本店好评</li>
        </ul>
        <ul class="text_list">
            <li class="content">柠檬</li>
            <li class="hidden">500kg</li>
            <li class="hidden">联系客服</li>
            <li class="hidden">非常好</li>
            <li class="hidden">店铺非常好</li>
        </ul>
    </div>

    <script>
        var nav_lists = document.querySelectorAll('.nav_list>li');//获取tab栏切换的导航
        var text_lists = document.querySelectorAll('.text_list>li');//获取左右的内容
        // 遍历nav_lists
        for(var i = 0 ; i < nav_lists.length ; i++){
            // 给nav_lists设置index
            nav_lists[i].setAttribute('index',i);
            nav_lists[i].onclick = function(){
                // 清除每一个nav_lists背景样式
                for(var j = 0 ; j < nav_lists.length ; j++){
                    nav_lists[j].className = 'nav';
                    // 隐藏所有text_lists
                    text_lists[j].style.display = 'none';
                }
                this.className = 'nav current';
                var index = this.getAttribute('index');

                // 点击哪一个nav_lists，就显示哪一个text_lists
                text_lists[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>