这篇博客详细介绍了使用JavaScript实现HTML元素的各种交互效果，包括按钮点击切换背景色、全选/取消全选复选框功能、Tab选项卡切换以及表格隔行换色。通过排他思想和事件监听，实现了只允许一个元素处于激活状态的效果，同时展示了如何动态改变元素样式和内容。
目录
原理：
如果有同一组元素，我们想要某一个元素实现某种样式， 需要用到循环的排他思想算法：
1. 所有元素全部清除样式（干掉其他人）
2. 给当前元素设置样式 （留下我自己）
3. 注意顺序不能颠倒，首先干掉其他人，再设置自己
一、小例子(五个按钮)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>11</button>
<button>12</button>
<button>13</button>
<button>14</button>
<button>15</button>
<script>
var btns=document.getElementsByTagName('button')
// console.log(btns);
for(var i=0;i<btns.length;i++){
btns[i].onclick=function(){
//把所有的样式变成null
for(var j=0;j<btns.length;j++){
btns[j].style.backgroundColor='';
}
//保留点击的
this.style.backgroundColor='blue';
}
}
</script>
</body>
</html>
二、全选按钮
要求：
1. 点击上面全选复选框，下面所有的复选框都选中（全选）2. 再次点击全选复选框，下面所有的复选框都不中选（取消全选）3. 如果下面复选框全部选中，上面全选按钮就自动选中4. 如果下面复选框有一个没有选中，上面全选按钮就不选中5. 所有复选框一开始默认都没选中状态
<input type="checkbox" name="" id="ckAll"/> 全选
<ul class="ulstyle">
<li><input type="checkbox" name="" value="" /> 第一行</li>
<li><input type="checkbox" name="" value="" /> 第二行</li>
<li><input type="checkbox" name="" value="" /> 第三行</li>
<li><input type="checkbox" name="" value="" /> 第四行</li>
</ul>
<script>
var ckAll = document.getElementById("ckAll");
var ckBoxs = document.querySelector(".ulstyle").getElementsByTagName("input");
//全选按钮添加单击事件
ckAll.onclick = function(){
for(var i=0;i<ckBoxs.length;i++){
ckBoxs[i].checked = this.checked;
}
}
//如果全部被选全选按钮被选上
for(var i=0;i<ckBoxs.length;i++){
ckBoxs[i].onclick = function(){
var flag = true;//默认都选中
//判断每一个选中的状态
for(var j=0;j<ckBoxs.length;j++){
if(!ckBoxs[j].checked){
flag = false;
}
}
ckAll.checked = flag;
}
}
</script>
三、tab栏切换
要求：当鼠标点击上面相应的选项卡（tab），下面内容跟随变化
步骤：
①Tab栏切换有2个大的模块
②上的模块选项卡，点击某一个，当前这一个底色会是红色，其余不变（排他思想） 修改类名的方式
③下面的模块内容，会跟随上面的选项卡变化。所以下面模块变化写到点击事件里面。
④规律：下面的模块显示内容和上面的选项卡一一对应，相匹配。
⑤核心思路： 给上面的tab_list 里面的所有小li 添加自定义属性，属性值从0开始编号。
⑥ 当我们点击tab_list 里面的某个小li，让tab_con 里面对应序号的 内容显示，其余隐藏（排他思想）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 978px;
margin: 100px auto;
}
.tab_list {
height: 39px;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab_list li {
float: left;
height: 39px;
line-height: 39px;
padding: 0 20px;
text-align: center;
cursor: pointer;
}
.tab_list .current {
background-color: #c81623;
color: #fff;
}
.item_info {
padding: 20px 0 0 20px;
}
.item {
display: none;
}
</style>
</head>
<body>
<div class="tab">
<div class="tab_list">
<ul>
<li class="current">商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评价（50000）</li>
<li>手机社区</li>
</ul>
</div>
<div class="tab_con">
<div class="item" style="display: block;">
商品介绍模块内容
</div>
<div class="item">
规格与包装模块内容
</div>
<div class="item">
售后保障模块内容
</div>
<div class="item">
商品评价（50000）模块内容
</div>
<div class="item">
手机社区模块内容
</div>
</div>
</div>
<script>
var lis=document.querySelector('.tab_list').querySelectorAll('li');
var items=document.querySelectorAll('.item');
//for循环遍历所有的li
for(var i=0;i<lis.length;i++){
//开始给5个小li设置索引号
lis[i].setAttribute('index',i);
lis[i].onclick=function(){
for(var j=0;j<lis.length;j++){
//把其他先消灭
lis[j].className='';
}
//保留自己
this.className='current';
//下面的显示内容模块
var index=this.getAttribute('index');
console.log(index);
//干掉所有人 让其余的item 这些div 隐藏
for(var i=0;i<items.length;i++){
items[i].style.display='';
}
//留下我自己 让对应的item显示出来
items[index].style.display='block';
}
}
</script>
</body>
</html>
四、表格隔行换色
思想： ①用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
② 核心思路：鼠标经过 tr 行，当前的行变背景颜色， 鼠标离开去掉当前的背景颜色③ 注意： 第一行（ thead 里面的行）不需要变换颜色，因此我们获取的是 tbody 里面的行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格隔行换色</title>
<style>
table {
width: 800px;
margin: 100px auto;
text-align: center;
border-collapse: collapse;
font-size: 14px;
}
thead tr {
height: 30px;
background-color: skyblue;
}
tbody tr {
height: 30px;
}
tbody td {
border-bottom: 1px solid #d7d7d7;
font-size: 12px;
color: blue;
}
.bg {
background-color: pink;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>代码</th>
<th>名称</th>
<th>最新公布净值</th>
<th>累计净值</th>
<th>前单位净值</th>
<th>净值增长率</th>
</tr>
</thead>
<tbody>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
<tr>
<td>003526</td>
<td>农银金穗3个月定期开放债券</td>
<td>1.075</td>
<td>1.079</td>
<td>1.074</td>
<td>+0.047%</td>
</tr>
</tbody>
</table>
<script>
//1.获取元素 获取的是 tbody 里面所有的行
var trs=document.querySelector('tbody').querySelectorAll('tr');
//2.利用循环绑定注册事件
for(var i=0;i<trs.length;i++){
trs[i].onmouseover=function(){
//排他思想
// console.log(1);
// for(var j=0;j<trs.length;j++){
// trs[j].className="";
// }
this.className="bg";
}
trs[i].onmouseout=function(){
this.className='';
}
}
</script>
</body>
</html>
总结：
排他思想
1.排他思想应用场景 ： 多个元素只能选中一个元素的场景
2.排他思想实现思路：两种思路 循环排他 (万能的) : (1)循环干掉所有兄弟 (2)复活自己
扫一扫
1450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
