手撕波波哥JS作业2-点击事件实现某块内容显示(两种方式)一

第一种方式（ul-li）

ul-li形式实现（ul-li的点击事件）

完整代码

先把三剑客的代码贴出来（这一部分的）

<div>
    <ul id="li_btn_main">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</div>
<div class="content"></div>

*{
    padding: 0;
    margin: 0px auto;
}

#li_btn_main{
    border: 1px solid red ;
    background-color: aqua;
    width: 800px;
    height: 100px;

    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#li_btn_main li{
    border: 1px dashed green;
    background-color: rgb(149, 149, 151);
    width: 100px;
    height: 50px;

    list-style: none;
    text-align: center;
}

.content{
    margin:  0 auto;
    width: 500px;
    height: 300px;
    border: 1px dashed blue;
}

// 方法一：使用ul-li来达到点击切换效果
let color = ['red','green','yellow','white','pink'];
const content = document.getElementsByClassName("content")[0];
for(let i = 0;i<color.length;i++){
    let btn = document.getElementsByTagName("li")[i];
    btn.style.backgroundColor = color[i];
    btn.addEventListener('click',function(){
        content.style.backgroundColor = color[i];
    })
}

实现效果图和注解

代码解析

// 方法一：使用ul-li来达到点击切换效果
let color = ['red','green','yellow','white','pink'];
const content = document.getElementsByClassName("content")[0];
for(let i = 0;i<color.length;i++){
    let btn = document.getElementsByTagName("li")[i];
    btn.style.backgroundColor = color[i];
    btn.addEventListener('click',function(){
        content.style.backgroundColor = color[i];
    })
}

先定义一个颜色对象：let color = ['red','green','yellow','white','pink'];

再找到要进行更改背景色的块（根据类名查找）：const content = document.getElementsByClassName("content")[0];

使用for循环进行操作：for(let i = 0;i<color.length;i++){....}。for循环次数根据颜色对象长度来

for循环里：

• 根据循环次数来查找li标签（5个），并赋值给btn。

• let btn = document.getElementsByTagName("li")[i];

• 设置li标签的背景色（也可以在css中设置，这里为了方便在这设置了）

• btn.style.backgroundColor = color[i];

• 然后就是给当前li标签添加点击事件（使用addEventListener方法）

• btn.addEventListener('click',function(){...}
• 点击事件里：

• 设置要修改背景色的块的背景色为颜色对象中所对应的颜色
• content.style.backgroundColor = color[i];

自此就实现了点击5个标签后，下面的区块也会随之更改背景色。