点击选项卡

最新推荐文章于 2024-10-03 22:12:17 发布

Captainboiler

最新推荐文章于 2024-10-03 22:12:17 发布

阅读量311

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/Captainboiler/article/details/121748769

版权

这篇博客展示了如何利用CSS样式和JavaScript实现一个交互式的列表。通过点击带有.head类的列表项，可以切换显示相应的.content类列表项，并改变被点击元素的背景颜色。文章详细解释了CSS样式设置和JavaScript事件处理，包括元素选择、样式修改和类的增减，为前端开发者提供了实用的交互设计示例。

摘要由CSDN通过智能技术生成

css样式如下

 <ul>
        <li class='head'onclick=on(0)>1</li>
        <li class='head'onclick=on(1)>2</li>
        <li class='head'onclick=on(2)>3</li>

    </ul>
    <ol>
        <li class=' content'>1</li>
        <li  class='dn content'>2</li>
        <li  class='dn content'>3</li>

    </ol>

然后设置公共样式

 ul,ol{
            list-style: none;
            float: left;
        }
        ul li{
            background-color: skyblue;
            width: 100px;
            height: 60px;
            text-align: center;
            margin: 0 auto;
            line-height: 60px;
        }
        ol li{
            background-color: pink;
            width: 400px;
            height: 180px;
            text-align: center;

        }
        .dn{
            display: none;
        }
        .yellow{
            background-color: yellow;
        }

js代码如下

<script>
        function on(n){
            //获取节点
            var head=document.querySelectorAll('.head')
            var content=document.querySelectorAll('.content')
            //全部隐藏

            Array.from(content).forEach(function (item) {
                item.classList.add('dn')
            })
            content[n].classList.remove('dn')
            //全部变颜色
            Array.from(head).forEach(function (item) {
                item.style.backgroundColor='skyblue'
            })
            //点击变颜色
            // head[n].classList.add('yellow')
            head[n].style.backgroundColor='yellow'
        }

    </script>