两种方式合并
ul-li 和 div同时
实际上就是说：点击指定区域的时候，同时进行修改content的背景色、显示指定的div
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<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>
<div class="content2" style="background-color: rgb(24, 133, 228);"></div>
<div class="content2" style="background-color: rgb(26, 199, 69);"></div>
<div class="content2" style="background-color: rgb(121, 28, 145);"></div>
<div class="content2" style="background-color: rgb(190, 30, 65);"></div>
<div class="content2" style="background-color: rgb(199, 201, 202);"></div>
<script src="index.js"></script>
</body>
</html>*{
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;
}
.content2{
border: 1px solid rgb(8, 8, 8);
width: 300px;
height: 300px;
}// step3：同时更改content和content2的背景颜色
//隐藏5个content2，将display设置为none
function Clear(){
for(let i = 0;i<5;i++){
let content2_clear = document.getElementsByClassName("content2")[i];
content2_clear.style.display = 'none';
}
}
// 方法二：使用5个div来达到点击相应按钮来切换的效果
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];
let content2 = document.getElementsByClassName("content2")[i];
btn.style.backgroundColor = color[i];
btn.addEventListener('click',function(){
Clear(); // 调用隐藏函数
content.style.backgroundColor = color[i]; // 设置背景颜色
content2.style.display = 'block'; // 设置当前点击的按钮所对应的content2显示
})
}实现效果图和注解
代码解析
代码就不解析了，看完上面的其实这个也懂了，就是直接糅合在了一起操作而已。
课堂笔记截图
自己课堂前写的
table-tr-td形式实现（button的点击事件）
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>按钮控制区域显示</title>
<style>
*{margin: 0 auto;padding: 0;background-color: rgb(201, 181, 154);text-align: center;}
.btn_main{border: 1px solid rgb(11, 41, 236);}
.center{width: 300px;height: 300px;background-color: white;}
button{width: 40px;height: 30px;}
a{color: inherit;text-decoration: none;}
</style>
</head>
<body>
<div class="btn_main">
<table>
<tr>
<td>
<button><a href="#">1</a></button>
</td>
<td>
<button><a href="#">2</a></button>
</td>
<td>
<button><a href="#">3</a></button>
</td>
<td>
<button><a href="#">4</a></button>
</td>
<td>
<button><a href="#">5</a></button>
</td>
</tr>
</table>
</div>
<div class="center">
</div>
<div style="border: 1px solid red;height: 21px;">
<p class="center_p" style="text-align: center;"></p>
</div>
<div class="log_ten_text">
<p>
倒计时<br>
<span class="log_span"></span><br>
计时结束后确认将前往百度首页</p>
</div>
<script>
// step1 - 点击相应的按钮修改center块背景颜色
let color = ['pink','red','green','yellow','white']
let text_center = ['点击按钮1','点击按钮2','点击按钮3','点击按钮4','点击按钮5'] // 点击按钮之后会在该区域显示点击了那个按钮
let center = document.getElementsByClassName('center')[0]; // 根据类名属性查找获取到要修改背景色的块
for(let i = 0;i<5;i++){ // 这里的长度其实还可以设置为颜色对象的长度：color.length
let btn = document.querySelectorAll('.btn_main button')[i];
btn.style.backgroundColor = color[i];
btn.addEventListener('click',function(){
center.style.backgroundColor = color[i];
let conter_p = document.getElementsByClassName("center_p")[0];
conter_p.innerText = text_center[i];
// 控制台输出（背景颜色、修改的文本内容）
console.log(center.style.backgroundColor);
console.log(conter_p.innerText);
})
console.log(btn);
}
</script>
</body>
</html>实现效果图和注解
这里上面五个按钮（使用表格方式来写），按下对应的按钮会改变下面块的背景色，同时在下面的文本信息也会改变显示为点击该按钮。
代码解析
// step1 - 点击相应的按钮修改center块背景颜色
let color = ['pink','red','green','yellow','white']
let text_center = ['点击按钮1','点击按钮2','点击按钮3','点击按钮4','点击按钮5'] // 点击按钮之后会在该区域显示点击了那个按钮
let center = document.getElementsByClassName('center')[0]; // 根据类名属性查找获取到要修改背景色的块
for(let i = 0;i<5;i++){ // 这里的长度其实还可以设置为颜色对象的长度：color.length
let btn = document.querySelectorAll('.btn_main button')[i];
btn.style.backgroundColor = color[i];
btn.addEventListener('click',function(){
center.style.backgroundColor = color[i];
let conter_p = document.getElementsByClassName("center_p")[0];
conter_p.innerText = text_center[i];
// 控制台输出（背景颜色、修改的文本内容）
console.log(center.style.backgroundColor);
console.log(conter_p.innerText);
})
console.log(btn);
}定义一个颜色对象：
let color = ['pink','red','green','yellow','white'];定义一个文本信息对象(点击对应按钮的信息)：
let text_center = ['点击按钮1','点击按钮2','点击按钮3','点击按钮4','点击按钮5']根据类名属性查找获取到要修改背景色的块：
let center = document.getElementsByClassName('center')[0];使用for循环进行操作：
for(let i = 0;i<5;i++){....}。for循环次数根据颜色对象长度来for循环里：
- 根据循环次数来查找
button标签（5个），并赋值给btn。
let btn = document.getElementsByTagName("li")[i];
- 修改btn的背景色。
btn.style.backgroundColor = color[i];
- 给每个btn添加点击事件
- 点击事件里：
- 修改背景色块
center.style.backgroundColor = color[i];
- 根据类名属性获取到要显示按下了那个对应的按钮的文本元素
let conter_p = document.getElementsByClassName("center_p")[0];
- 修改文本元素的文本为文本对象中对应的值
conter_p.innerText = text_center[i];
