js 实现列表栏与内容联动点击（排他思想）

慕苏苏酥酥苏

已于 2023-08-29 15:19:24 修改

阅读量137

点赞数

分类专栏： Web 前端文章标签： javascript 前端开发语言

于 2023-08-27 17:25:29 首次发布

本文链接：https://blog.csdn.net/weixin_64893566/article/details/132524472

版权

Web 前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

实现列表栏与内容联动点击

设置样式列表栏与内容区域

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

<head>
    <style>
        * {
            padding: 0;
            margin: 0;
            text-align: center;
        }

        ul {
            list-style: none;
        }

        li {
            width: 150px;
            height: 30px;
            line-height: 30px;
            /* border: 1px solid; */
        }

        /* 默认显示列表一显示背景 设置一个背景样式的类*/
        .libgc {
            background-color: skyblue;
            color: azure;
        }

        .f,
        .f1 {
            float: left;
        }

        .c {
            width: 200px;
            height: 90px;
            line-height: 90px;
            background-color: #a6d0ca;
            color: #000;
            /* 所有div隐藏 */
            display: none;
        }

        /* 默认显示列表1内容区域显示 */
        .c:first-of-type {
            display: block;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="f1">
            <ul>
                <li class="libgc">列表1</li>
                <li>列表2</li>
                <li>列表3</li>
            </ul>
        </div>

        <div class="f">
            <div class="c">列表1内容模块</div>
            <div class="c">列表2内容模块</div>
            <div class="c">列表3内容模块</div>
        </div>
    </div>

</body>

</html>

静态页面

js 实现点击列表区域联动变换内容区域

1.列表区域的点击样式（排他思想）

    <script>
        // 获取需要实现样式的列表元素
        var li = document.querySelectorAll('li')

        // 对此组元素进行遍历循环
        for (let i = 0; i < li.length; i++) {
            // 设置一个触发机制 例如鼠标点击
            li[i].onclick = function () {
                // 循环的为所有li样式进行清除(去除背景类)
                for (let i = 0; i < li.length; i++) {
                    li[i].className = ''
                }
                // 对自己设置样式（添加背景类）
                this.className = 'libgc'
            }
        }
    </script>

实现效果

此时点击列表区域点击样式触发，内容区域未联动触发

2.点击列表联动内容区域改变

   <script>
        // 获取需要实现样式的列表元素
        var li = document.querySelectorAll('li')

        // 补充
        var div = document.querySelectorAll('.c')

        // 对此组元素进行遍历循环
        for (let i = 0; i < li.length; i++) {
            // 设置一个触发机制 例如鼠标点击
            li[i].onclick = function () {
                // 循环的为所有li样式进行清除(去除背景类)
                for (let i = 0; i < li.length; i++) {
                    li[i].className = ''
                }
                // 对自己设置样式（添加背景类）
                this.className = 'libgc'


                // 补充
                // 给所有li设置一个自定义属性index
                li[i].setAttribute('index', i)
                // 获取到此当前元素的index
                var index = this.getAttribute('index')

                // 遍历循环内容区域的div
                // 第二个排他思想
                for (let j = 0; j < div.length; j++) {
                    // 所有div隐藏
                    div[j].style.display = 'none'
                }
                // 利用index将两个区域链接起来，使当前的div显示
                div[index].style.display = 'block'
            }
        }
    </script>

实现效果

点击列表实现内容区域同样改变