JS tab选项卡

冷酷吗喽

已于 2024-04-08 09:46:17 修改

阅读量183

点赞数 3

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

于 2024-04-08 09:41:03 首次发布

本文链接：https://blog.csdn.net/m0_72189003/article/details/137493882

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章介绍了如何使用CSS样式和JavaScript为HTML中的li元素创建点击切换效果，同时更新内部的div内容，展示了基础的前端交互设计。

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

style：

<style>

  ul li{
        list-style: none;
        float: left;
        width: 80px;
        height: 40px;
        line-height: 40px;
        background: greenyellow;
        text-align: center;
        
    }
  
    .text{
        clear: both;
        width: 200px;
        height: 200px;
        text-align: center;
        background: #c3b9b9;
        margin-left: 50px;
    }
</style>

html：

 <ul>
    <li>tab1</li>
    <li>tab2</li>
    <li>tab3</li>
</ul> 
<div class="text">内容一</div>

js：

var lis = document.querySelectorAll("li")
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                for (let j = 0; j < lis.length; j++) {
                    lis[j].style.background = "greenyellow"
                }
                lis[i].style.background = "white"
                document.querySelector(".text").innerHTML = `内容${i + 1}`
            }

        }