JavaScript DOM案例点击按钮实现显示相应列表多种方法

最新推荐文章于 2024-04-26 16:47:03 发布

莫道一龙

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量1.1k

点赞数 1

分类专栏： JS案例文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_57284405/article/details/130995562

版权

JS案例专栏收录该内容

3 篇文章 1 订阅

订阅专栏

案例效果展示：

在这里插入图片描述

分析：

第一步：添加标签：button、无序列表
第二步：设置样式：button通过行内样式设置默认颜色，在通过嵌入式设置 button 和 li 标签样式
第三步：设置js：通过querySelectorAll获取所有button和li元素；通过循环为每个button绑定事件类型；在事件执行的程序中，通过排他思想清除恢复所有button、li默认样式，再为所点击和触发的元素设置样式。

实现：

添加标签（行内样式直接设置了）

<body>
    <div>
        <div>
            <button style=" color: black; ">电影票</button>
            <button style="color: red;">飞度</button>
            <button style="color: blue;">致梦想</button>
            <button style="color: orange;">海涛</button>
        </div>
        <div>
            <ul>
                <li>111</li>
            </ul>
            <ul>
                <li>222</li>
            </ul>
            <ul>
                <li>333</li>
            </ul>
            <ul>
                <li>444</li>
            </ul>
        </div>
    </div>
</body>

设置CSS标签样式：

<style>
        li {
            display: none; // li默认为隐藏
            list-style: circle;
        }

        .color {
            color: aqua !important; // 行内样式权重较高，若通过标签样式改变属性需加 !important 提高权重
        }
</style>

设置JavaScript
方法一(最笨的方法，通过隐藏和显示li标签来完成):

	<script>
 	var btn = document.querySelectorAll('button');
    var li = document.querySelectorAll('li');
    for (var i = 0; i < btn.length; i++) {
 	btn[0].onclick = function () {
           for (var i = 0; i < btn.length; i++) {
               btn[i].className = ''
               li[i].style.display = 'none'
              }
                this.className = "color"
                console.log('btn0运行')
                li[0].style.display = 'block'
            }
            btn[1].onclick = function () {
                for (var i = 0; i < btn.length; i++) {
                    btn[i].className = ''
                    li[i].style.display = 'none'
                }
                this.className = "color"
                console.log('btn1运行')
                li[1].style.display = 'block'
            }
            btn[2].onclick = function () {
                for (var i = 0; i < btn.length; i++) {
                    btn[i].className = ''
                    li[i].style.display = 'none'
                }
                this.className = "color"
                console.log('btn2运行')
                li[2].style.display = 'block'
            }
            btn[3].onclick = function () {
                for (var i = 0; i < btn.length; i++) {
                    btn[i].className = ''
                    li[i].style.display = 'none'
                }
                this.className = "color"
                console.log('btn3运行')
                li[3].style.display = 'block'
            }
		}
	</script>

方法二(经典的for循环)：

 <script>
        var btn = document.querySelectorAll('button');
        var li = document.querySelectorAll('li');
        for (let i = 0; i < btn.length; i++) {

            btn[i].setAttribute('id', i)
            btn[i].onclick = function () {

                for (let j = 0; j < btn.length; j++) {
                    btn[j].className = ''
                    li[j].style.display = 'none'
                }
                this.className = "color"
                li[i].style.display = 'block'
            }
        }
    </script>

注：
for循环内声明变量时需要用let关键字,var关键字会出问题

方法三(通过添加id属性，获取id值)：

    <script>
        var btn = document.querySelectorAll('button');
        var li = document.querySelectorAll('li');
        for (let i = 0; i < btn.length; i++) {

            btn[i].setAttribute('id', i)
            btn[i].onclick = function () {
                for (var i = 0; i < btn.length; i++) {
                    // this.removeAttribute('class')
                    btn[i].className = ''
                    li[i].style.display = 'none'
                }
                // this.setAttribute('class')
                this.className = "color"
                var n = this.id
                console.log(this.id)
                li[n].style.display = 'block'
            }
        }
    </script>

方法四(通过改变ul的2D平移来实现):

    <style>
        div:last-child {
            height: 40px;
            line-height: 40px;
            overflow: hidden;
        }
        ul {
            height: 40px;
            margin: 0;
           transform: translateY(40px);
        }
        .color {
            color: aqua !important;
        }
    </style>

    <script>
        var btn = document.querySelectorAll('button');
        var ul = document.querySelectorAll('ul');

        for (var i = 0; i < btn.length; i++) {

            btn[i].setAttribute('id',i)
            btn[i].onclick = function () {
                
                for (var i = 0; i < btn.length; i++) {
                    btn[i].className = ''
                    ul[i].style.transform = 'translateY(40px)'
                }
                this.className = "color"
                var n =  this.id
                console.log(this.id)
                 ul[n].style.transform = 'translateY(-' + n * 40 + 'px)'
            }
        }
    </script>