02-JS-web API-表单属性-文本域-事件监听-排他思想
1 设置/修改 表单元素 属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框
表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示
如果为true 代表添加了该属性
如果是false 代 表移除了该属性
1 设置普通的输入框
//属性名 . 属性值
input.value ="文本内容"
2 设置 按钮的禁用
//属性名 . 属性值
button.disabled=true 禁用
button.disabled=false 启用
3 设置单选框或者复选框
//属性名 . 属性值
radio.checked=true 选中
checkbox.checked=false 取消选中
4 设置下拉列表 select
//属性名 . 属性值
option.selected=true 选中
5 文本域标签 属于表单元素 又是双标签
value 与 innerHTML 有区别 设置 textarea 里面文本的内容的时候 想要获取 内容 .value 原样获取内容 .innerHTML 获取的内容如果包含html 会转移
<textarea>1</textarea>
<script>
// 获取 文本域标签
// 属于表单元素 又是双标签
let textarea = document.querySelector('textarea');
// 在html想要设置 文本域的内容 直接在标签内写即可
// <textarea> 你好 </textarea>
// 获取文本域中的值
// console.log(textarea.value); // 获取 OK <h1>你好</h1>
// console.log(textarea.innerText); // 获取 不OK
// console.log(textarea.innerHTML); // 获取 OK <h1>你好</h1>
// value 有区别 innerHTML
// 设置 textarea 里面文本的内容的时候
// 可以选择 在标签内写文本即可
// 想要获取 内容
// .value 原样获取内容
// .innerHTML 获取的内容如果包含html 会转译
// 通过js的方式来设置内容
// textarea.value=`<h1>标题</h1>`; // ok
// textarea.innerText=`<h1>标题</h1>`; // ok
// textarea.innerHTML=`<h1>标题</h1>`; // ok
</script>
1~5综合HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>04-表单属性设置.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="username" />
是否同意协定
<input type="checkbox" class="isarg" />
<button class="code" disabled>发送验证码</button>
<select class="sel">
<option>去泰国</option>
<option>去非洲</option>
<option>去印度</option>
<option>去啊富汗</option>
</select>
<!-- <textarea> 你好 </textarea> -->
<textarea class="d1"> </textarea>
<textarea class="d2"> </textarea>
<textarea class="d3"> </textarea>
<script>
function init() {
/*
innerText innerHTML 主要是用来设置 双标签的文本内容的
*/
// 获取一下表单 dom元素
let username = document.querySelector('.username');
// 复选框
let isarg = document.querySelector('.isarg');
// 按钮
let code = document.querySelector('.code');
// 设置文本内容
// username.innerText = '我的用户名';
// 设置输入框的文本内容
username.value = '我的用户名';
// 设置勾选上
// isarg.checked = true;
// 不勾选
// isarg.checked = false;
// 设置按钮 可以启用 可以点击
// disabled 禁用
// code.disabled = true;// 禁用
code.disabled = false; // 启用
// select 选中
let option = document.querySelector('option:nth-child(4)');
// option.select = true; // 错误的单词
option.selected = true; // 正确的单词
// checked disabled selected
/*
表单属性的总结
1 设置普通的输入框 input.value ="表单的值"
2 设置 按钮的禁用
button.disabled=true 禁用
button.disabled=false 启用
3 设置单选框或者复选框
radio.checked=true 选中
checkbox.checked=false 取消选中
4 设置下拉列表 select
option.selected=true 选中
5 文本域标签 有点点特殊 ！ 下一节课再来讲解
*/
}
// 获取 文本域标签
// 属于表单元素 又是双标签
// let textarea = document.querySelector('textarea');
// let textarea1 = document.querySelector('.d1');
// let textarea2= document.querySelector('.d2');
// let textarea3 = document.querySelector('.d3');
// 在html想要设置 文本域的内容 直接在标签内写即可
// <textarea> 你好 </textarea>
// 获取文本域中的值
// console.log(textarea.value); // 获取 OK <h1>你好</h1>
// console.log(textarea.innerText); // 获取 不OK
// console.log(textarea.innerHTML); // 获取 OK <h1>你好</h1>
// value 有区别 innerHTML
// 设置 textarea 里面文本的内容的时候
// 可以选择 在标签内写文本即可
// 想要获取 内容
// .value 原样获取内容
// .innerHTML 获取的内容如果包含html 会转移
// 通过js的方式来设置内容
textarea1.value=`<h1>标题</h1>`; // ok
textarea2.innerText=`<h1>标题</h1>`; // ok
textarea3.innerHTML=`<h1>标题</h1>`; // ok
</script>
</body>
</html>
2 事件监听-三要素-事件类型
1 事件三要素
1 什么是事件？
事件是在编程时系统内发生的动作或者发生的事情
比如用户在网页上单击一个按钮
2 什么是事件监听？
就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为 注册事件
3 事件监听三要素：
1 事件源： 那个dom元素被事件触发了，要获取dom元素
注意: 获取元素的 ( ' ' ) 要加引号
① 标签类的 就用标签 如: div
② 类名的 就要在前面加 点 如: .box
③ ID类的 就要在前面加 # 如: #box
// 1 获取 元素
let btn=document.querySelector('button')
2 事件： 用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
注意:
1. 事件类型要加引号
2. 函数是点击之后再去执行，每次
点击都会执行一次
// 2 事件监听(注册事件) 事件类型 函数
btn.addEventListener( 'click',function(){
})
3 事件调用的函数： 要做什么事 ,执行什么程序
// 2 事件监听(注册事件) 事件类型 函数
btn.addEventListener( 'click',function(){
//执行程序
console.log('我被点击了');
})
2 事件类型-绑定不同的事件
1.常见的鼠标事件
1 鼠标类-点击 ( "click")
//鼠标点击
div.addEventListener("click",function () {
console.log("click 鼠标点击事件");
})
2 鼠标类-鼠标经过元素 ( "mouseenter" )
// 鼠标经过元素
div.addEventListener("mouseenter",function () {
console.log("mouseenter 鼠标经过");
})
3 鼠标类- 鼠标离开元素 ( "mouseleave" )
// 鼠标离开元素
div.addEventListener("mouseleave",function () {
console.log("mouseleave 鼠标离开");
})
4 鼠标类-鼠标经过 ( "mouseover" )
// 鼠标经过
div.addEventListener("mouseover",function () {
console.log("mouseover 鼠标经过");
})
5 鼠标类-鼠标离开 ( "mouseout" )
// 鼠标离开
div.addEventListener("mouseout",function () {
console.log("mouseout 离开");
})
| 鼠标触发 | 触发条件 |
|---|---|
| click | 鼠标点击左键触发 |
| mouseover (有冒泡效果) , mouseenter (没有冒泡效果,推荐) | 鼠标经过触发 |
| mouseout (有冒泡效果) , mouseleave (没有冒泡效果,推荐) | 鼠标离开触发 |
| focusr | 获得鼠标焦点触发 |
| blu | 失去鼠标焦点触发 |
| mousemove | 鼠标移动触发 |
| mouseup | 鼠标弹起触发 |
| mousedown | 鼠标按下触发 |
2 焦点事件
注意: 只有表单 元素 有获得焦点 失去焦点事件
1 表单标签-获得焦点 ( "focus" )
// 获得焦点
input.addEventListener("focus",function () {
console.log("输入框 获得焦点 ");
document.body.style.backgroundColor='#000'
})
2 表单标签-失去焦点 ( "blur" )
// 失去焦点
input.addEventListener("blur",function () {
console.log("输入框 失去焦点");
document.body.style.backgroundColor='#fff'
})
3 键盘事件
注意: 键盘按下事件 div不行 表单标签可以 给body标签添加比较多
1 键盘按下-给body标签添加比较多 ( "keydown" )
// 给body标签添加比较多
document.body.addEventListener("keydown",function () {
console.log("keydown 按下");
})
2 键盘抬起 ( "keyup" )
// 键盘抬起
document.body.addEventListener("keyup",function () {
console.log("keyup 抬起");
})
4 文本事件-表单输入触发
在输入框 输入时触发
// 输入事件 输入框
input.addEventListener("input",function () {
console.log("只要你在我的输入框输入了内容，我就触发");
})
3 拓展-不同的绑定事件 - L0 (on )
使用旧方式 L0 第一个版本的方式绑定点击事件 on+事件类型 = 匿名函数
新版本与旧版本的区别
但是新版本会对就浏览器有些不兼容
1 addEventListener 对一个事件类型 绑定多个处理函数 (新版本-L2)
2 on+事件 对一个事件类型 只能绑定一个处理函数 (旧版本-L0)
<!-- 以下两种方式都不推荐 了解即可-->
<!-- <button onclick="console.log(123)" >点击</button> -->
<!-- <button onclick="show()">点击</button> -->
<button>点击</button>
<script>
// 1 获取dom元素
let btn = document.querySelector('button');
// 使用旧方式 L0 第一个版本的方式绑定点击事件 on+事件类型 = 匿名函数
// on也可以是在 行内 绝对不推荐
btn.onclick = function () {
console.log('事件触发啦');
};
btn.onclick = function () {
console.log('事件触发啦');
};
btn.onclick = function () {
console.log('事件触发啦');
};
btn.onclick = function () {
console.log('事件触发啦');
};
// addEventListener 对一个事件类型 绑定多个处理函数
// on+事件 对一个事件类型 只能绑定一个处理函数
// btn.onclick = show;
// function show() {
// console.log('show');
// }
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
// btn.addEventListener("click",function () {
// console.log("show");
// });
</script>
4 字符串-(补充)也能和数组一样
1 类似数组的特性
2 属性 length 当前字符串的长度
3 字符串也可以通过下标来访问
4 字符串也可以遍历
// 字符串有 数组的长度length
let str="你们好呀";
str[0]=你
str[1]=们
// 字符串也可以循环
for (let index = 0; index < str.length; index++) {
console.log(str[index]);
}
5 环境对象 ( this)
this = 表示 我自己 this整体的知识
环境对象指的是函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境
作用：弄清楚this的指向，可以让我们代码更简洁
1 函数的调用方式不同，this 指代的对象也不同
2 【谁调用， this 就是谁】 是判断 this 指向的粗略规则
3 哪个元素绑定点击事件,哪个元素就是this
4 直接调用函数，其实相当于是 window.函数，所以 this 指代 window
// 需求： 点击每一个 li标签 都可能 打印出 被点击的li标签的文本内容即可
let liList=document.querySelectorAll("li");
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener("click",function () {
// console.log(liList[index].innerText);
console.log(this.innerText); // this = 表示 我自己 this整体的知识
})
}
6 排他思想
先用循环把所有标签都 格式化 (大家都一样)
然后再通过 this 或 下标 找到自己或者对应的元素 (再添加样式或类)
// 先获取到每一个li标签
// 再li标签绑定点击事件
// 写处理其他所有的元素 让让他们的背景颜色都变成白色
// 事件触发 设置 被点击的li标签 选中的样式
let liList = document.querySelectorAll('li');
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener('click', function () {
// 给被点击的li标签加上选中样式
// liList[index].style.backgroundColor = 'red';
// 先设置每一个li标签的背景颜色 成 白色
for (let j = 0; j < liList.length; j++) {
liList[j].style.backgroundColor = '#fff';
}
// 再单独设置 被点击的li标签 变成红色
this.style.backgroundColor = 'red';
});
}
7 高阶函数
高阶函数可以被简单理解为函数的高级应用，JavaScript 中函数可以被当成【值】来对待，基于这个特性实现函数的高 级应用。
值 就是 JavaScript 中的数据,如数值 字符串 布尔 对象等
1 函数表达式
函数表达式和普通函数并无本质上的区别
普通函数的声明与调用无顺序限制，推荐做法先声明再调用
函数表达式必须要先声明再调用
函数也是【数据】
把函数赋值给变量
2 回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
把函数当做另外一个函数的参数传递，这个函数就叫回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数做为回调函数比较常见
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>14-高阶函数.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<button>按钮</button>
<script>
/*
在培训阶段， 高阶函数的应用 在react阶段（培训过程最后一个阶段） 大量的应用
1 现在讲 会忘记 （必然）
2 先讲 老师会再复习
3 有什么用
现在的我们的水平太低 还没有到封装代码的程度 所以没有用
高阶函数
把一个函数 看成是个普通数据，应用在 参数 或者返回值 技术
*/
function f1(callback) {
callback();
}
function f2() {
console.log("我就是高阶函数");
}
f1(f2);// f2 当成是一个普通的参数来使用（形参来使用）
setInterval(f2,1000);// 把f2 当成是一个普通参数 传递给别人使用
const btn=document.querySelector("button");
btn.addEventListener("click",f2);// f2 也是高阶函数
// function getIndex() {
// let index=0;
// return function () {
// index++;
// console.log(index);
// }
// }
// const ff=getIndex();
// ff();
</script>
</body>
</html>
8 案列示范
1 点击按钮-数字-1
<body>
<button class="btn1">1000</button>
<script>
let btn1 = document.querySelector('.btn1');
let i=999
// click 鼠标单击
btn1.addEventListener('click', function () {
console.log(i);
btn1.innerText=i
--i
});
// 1 获取一下 按钮中的文本
// console.log(button.innerText);
// let num = button.innerText;// 数据类型是字符串 比较注意 做 + 运算
// console.log(num + 1);// 字符串拼接
// console.log(num - 1);// 隐式转换 转成成数字
// button.innerText = button.innerText - 1;// 不用担心变成字符串
// button.innerText = button.innerText + 1;// + 变成字符串
// num = num -1 // num-=1 // --num
// button.innerText -= 1;
// 字符串 ++ 或者 -- 也会做隐式转换！！
// --button.innerText;
// ++button.innerText
// button.innerText += 1; // 不会做隐式转换
// button.innerText--;
</script>
</body>
2 点击按钮-隐藏
<button>点我就消失</button>
<script>
let button = document.querySelector('button');
// 注册 绑定点击事件
button.addEventListener('click', function () {
// 直接给元素加样式 标签隐藏 ,也可以给其他标签加
button.style.display='none'
});
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>
<h1></h1>
<button class="btn1">开始随机点名</button>
<button class="btn2">结束点名</button>
<script>
/*
优化
1 把数组的定义 提取到外面
2 如果定时器中业务比较繁琐 也可以提取出去到单独函数中 不是必须
3 bug 点击多次 开始抽奖 ，后面无法停止定时器
在我们行业中 有专业的术语 节流！！
让我们的顺序 一一个的执行 一次一次的执行 不要同时执行多个
在一个定时器没有执行结束的时候 不让开启另外一个定时器
一个班级的人 都想去上厕所 ！！
你想要去上厕所的时候
1 先看一下里面有没有人
2 有人了 我就不去
3 没有人 我进去了 会把门关上
4 解决完毕了 出去同时把门打开
4 如何解决 点击多次按钮 后面停止定时器的bug n种解法
1 在开启定时器的时候 我直接禁用了button 不让它再次点击
在清除定时器 重新启用按钮即可
2 在每一次开启定时器的之前，都停止一次定时器
*/
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let h1 = document.querySelector('h1');
let arr = ['张飞', '赵云', '刘备', '吕布', '刘婵'];
let timeId;
// 定时器要执行的业务逻辑
function intervalDo() {
let index = Math.round(Math.random() * (arr.length - 1));
h1.innerText = arr[index];
// return undefined
}
btn1.addEventListener('click', function () {
// 先停止定时器 第一次清除 定时器的时候 timeId 是undefined
// if (timeId) {
if (timeId !== undefined) {
// timeId = 是 undefined => bool 是false
// 当timeId = undefined =false 不满足条件 不会执行 清除了
clearInterval(timeId);
}
// 禁用按钮 不让再次点击
// btn1.disabled = true;
timeId = setInterval(intervalDo, 100);
console.log('开启定时器', timeId);
});
btn2.addEventListener('click', function () {
// 重新启用 开始按钮
// btn1.disabled = false;
clearInterval(timeId);
});
</script>
</body>
</html>
4 商品,单选与全选综合使用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>10-商品全选</title>
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
</head>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
/*
1 获取 全选标签 绑定点击事件
checkAll
2 点击事件触发后 获取 复选框的选中属性 checkAll.checked
3 把全选按钮的选中状态 设置到每一个 其他复选框中
4 数组和循环思想 解决重复工作的
*/
let checkAll = document.querySelector('#checkAll');
// 获取符合选择器要求的数组
let checkboxList = document.querySelectorAll('.ck');
// console.log(checkboxList);
// 监听点击 绑定点击 注册点击 订阅点击
checkAll.addEventListener('click', function () {
// console.log('全选');
// console.log(checkAll.checked); // 获取当前全选按钮的选中状态
// 设置复选框 选中状态等于 全选框的选中状态
for (let index = 0; index < checkboxList.length; index++) {
// checkboxList[index] // 每一个复选框
checkboxList[index].checked = checkAll.checked;
}
});
// 一组商品的 点击功能
// 给每一个商品绑定点击事件
for (let index = 0; index < checkboxList.length; index++) {
checkboxList[index].addEventListener('click', function () {
// 判断是否达到了全选 条件
let checked = isAllChecked();
// 设置全选按钮即可
checkAll.checked = checked;
});
}
/*
1 获取商品数组
2 遍历他们绑定点击事件
3 事件触发了 判断当前的是否达到了全选的状态
4 把 状态也设置到 全选按钮中
*/
// 给每一个商品绑定点击事件
for (let index = 0; index < checkboxList.length; index++) {
checkboxList[index].addEventListener('click', function () {
// 判断是否达到了全选 条件
let checked = isAllChecked();
// 设置全选按钮即可
checkAll.checked=checked;
});
}
// 函数来判断
function isAllChecked() {
// 1 存放选中的商品的数量
let checkedNum = 0;
// 2 商品数组做循环
for (let index = 0; index < checkboxList.length; index++) {
// 3 判断每一商品的选中状态
if (checkboxList[index].checked) {
checkedNum++;
}
}
// 4 循环结束了 判断 选中商品的数量和 商品总数量之间的关系
if (checkedNum === checkboxList.length) {
// console.log('全选');
return true;
} else {
// console.log('不全选');
return false;
}
}
</script>
</body>
</html>
5 购物车加减按钮(数字加减)
<body>
<h1>1</h1>
<button class="d1">+</button>
<button disabled class="d2">-</button>
<script>
let h1=document.querySelector('h1')
let btn1=document.querySelector('.d1')
let btn2=document.querySelector('.d2')
// 增加
btn1.addEventListener('click',function(){
// H1的文字也是字符串类型,给他++就是数字增加
h1.innerText++;
btn2.disabled='false'
})
// 减少
btn2.addEventListener('click',function(){
h1.innerText--;
if(h1.innerText==1){
btn2.disabled='true' //禁用 按钮
}
})
</script>
</body>
6 排他思想-点谁,谁变色,其他人不变
<title>06-怕他思想的应用.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
width: 600px;
height: 100px;
display: flex;
margin: 100px auto;
border: 1px solid #ccc;
}
li {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
// 先获取到每一个li标签
// 再li标签绑定点击事件
// 写处理其他所有的元素 让让他们的背景颜色都变成白色
// 事件触发 设置 被点击的li标签 选中的样式
let liList = document.querySelectorAll('li');
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener('click', function () {
// 给被点击的li标签加上选中样式
// liList[index].style.backgroundColor = 'red';
// 先设置每一个li标签的背景颜色 成 白色
for (let j = 0; j < liList.length; j++) {
liList[j].style.backgroundColor = '#fff';
}
// 再单独设置 被点击的li标签 变成红色
this.style.backgroundColor = 'red';
});
}
</script>
</body>
</html
7 Tab栏切换案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.wrapper {
width: 1000px;
height: 475px;
margin: 0 auto;
margin-top: 100px;
}
.tab {
border: 1px solid #ddd;
border-bottom: 0;
height: 36px;
width: 320px;
}
.tab li {
position: relative;
float: left;
width: 80px;
height: 34px;
line-height: 34px;
text-align: center;
cursor: pointer;
border-top: 4px solid #fff;
}
.tab span {
position: absolute;
right: 0;
top: 10px;
background: #ddd;
width: 1px;
height: 14px;
overflow: hidden;
}
.products {
width: 1002px;
border: 1px solid #ddd;
height: 476px;
}
.products .main {
float: left;
display: none;
}
.products .main.active {
display: block;
}
.tab li.active {
border-color: red;
border-bottom: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">国际大牌<span>◆</span></li>
<li class="tab-item">国妆名牌<span>◆</span></li>
<li class="tab-item">清洁用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main active">1
<a href="###"><img src="imgs/guojidapai.jpg" alt="" /></a>
</div>
<div class="main">2
<a href="###"><img src="imgs/guozhuangmingpin.jpg" alt="" /></a>
</div>
<div class="main">3
<a href="###"><img src="imgs/qingjieyongpin.jpg" alt="" /></a>
</div>
<div class="main">4
<a href="###"><img src="imgs/nanshijingpin.jpg" alt="" /></a>
</div>
</div>
</div>
<script>
/*
1 给标题标签 给他们绑定点击事件
2 事件触发 开始使用排他思想
1 获取所有的要设置标题样式的标签 遍历他们，移除掉 上边框 红色效果
2 通过 this 给自己单独添加上 上边框红色的效果
3 获取到所有的main标签（决定图片显示） 遍历他们 移除掉 一个class active
4 再获取到要设置的 main标签 让它 添加上一个class active
*/
let liList = document.querySelectorAll('li');
let mainList = document.querySelectorAll('.main');
for (let index = 0; index < liList.length; index++) {
liList[index].addEventListener('click', function () {
// 遍历li标签 移除他们身上的类 active
for (let j = 0; j < liList.length; j++) {
liList[j].classList.remove('active');
}
// 单独对我自己 添加一个类
this.classList.add('active'); // this = li标签
// 处理图片显示部分
// 先遍历所有的main标签 让他们移除掉 active
for (let j = 0; j < mainList.length; j++) {
mainList[j].classList.remove('active');
}
// 设置给对应的标签 添加上 active
// 单独对我自己 添加一个类
// mainList[index] // index 就是和被点击li标签的下标
mainList[index].classList.add('active');
});
}
</script>
</body>
</html>
