第一种方式（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个标签后，下面的区块也会随之更改背景色。
