语法补充 attribute语法学习 自定义属性data-* tab栏切换"/>
排他思想 开关思想 获取元素语法补充 attribute语法学习 自定义属性data-* tab栏切换
01-核心案例：排他思想
1.1-案例：筋斗云
需求分析：
1.鼠标移入li元素：筋斗云移入到对应的li元素2.鼠标移出li元素：筋斗云移动到选中的li元素3.鼠标点击li元素：改变选中的li元素
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}body {background-color: #333;}.nav {width: 800px;height: 42px;margin: 100px auto;/*background-color: red;*/background: #fff url(images/rss.png) no-repeat right center;border-radius: 10px;position: relative;}.nav li {width: 83px;height: 42px;/*background-color: red;*/text-align: center;line-height: 42px;float: left;cursor: pointer;}ul {position: relative;}.nav .current {background: url(images/cloud.gif) no-repeat;}</style>
</head><body><div class="nav"><ul id="navBar"><li class="current">北京校区</li><li>上海校区</li><li>广州校区</li><li>深圳校区</li><li>武汉校区</li><li>关于我们</li><li>联系我们</li><li>招贤纳士</li></ul></div><script>// 1. 事件源：所有的li标签let lis = document.querySelectorAll('#navBar>li');// 获取li的位置：设置一个观察者，点击筋斗云默认的位置 let index = 0let index = 0;// 2. 遍历li，给每个li绑定事件lis.forEach(function (item, key) {// item是lis里面的每个元素值：li，key是当前li的下标// 2.1 鼠标移入事件item.onmouseover = function () {// 排他思想：让所有的li都没有背景lis.forEach(function (li) {li.classList.remove('current');});// 给当前被点击的li增加背景item.classList.add('current');};// 2.2 点击事件item.onclick = function () {index = key;}// 2.3 鼠标移出事件item.onmouseout = function () {// 排他思想：让所有的li都没有背景lis.forEach(function (li) {li.classList.remove('current');});lis[index].classList.add('current');}});</script>
</body></html>
02-核心案例：开关思想
1.1-点餐选择框:开关思想
需求分析：切入点：交互
1.点击上方选择框：让下方选择框列表的checked值与自身保持一致
2.点击下方选择框列表：判断上方选择框列表状态
选中：所有的选择框checked值都是true
未选中：只要有一个选择框checked值是false
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}table {border-collapse: collapse;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;}</style>
</head>
<body>
<table><tr><th><input type="checkbox" id="checkAll"/>全选/全不选</th><th>菜名</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" class="check"/></td><td>红烧肉</td><td>隆江猪脚饭</td><td>￥200</td></tr><tr><td><input type="checkbox" class="check"/></td><td>香酥排骨</td><td>隆江猪脚饭</td><td>￥998</td></tr><tr><td><input type="checkbox" class="check"/></td><td>北京烤鸭</td><td>隆江猪脚饭</td><td>￥88</td></tr>
</table><script>/*1.分析需求(交互)：a.点击上方选择框：下方选择框列表checked属性与上方选择框一致b.点击下方选择框列表：检查上方选择框选中状态选中：所有的选择框列表都是选中状态未选中：只要有任何一个选择框列表未选中2.思路分析（事件三要素）获取元素：事件源：注册事件：事件类型事件处理：*///1.获取元素let checkAll = document.querySelector('#checkAll');//上方选择框let checkList = document.querySelectorAll('.check');//下方三个选择框列表//2.注册事件//2.1 上方选择框checkAll.onclick = function () {//3.事件处理:下方选择框列表checked属性与自身一致console.log(this.checked);for(let i = 0;i<checkList.length;i++){checkList[i].checked = this.checked;};};//2.2 下方选择框列表for(let i = 0;i<checkList.length;i++){//i = 0 1 2checkList[i].onclick = function(){//3.事件处理:this点击的那个选择框//检查上方选择框选中状态/* 开关思想：当某种操作结果只有两种状态，可以使用布尔类型表示这两种状态1.提出假设 let isAllOk = true2.验证假设3.根据开关结果实现需求*///3.1 提出假设let isAllOk = true;//3.2 验证假设for(let j = 0;j<checkList.length;j++){// console.log(checkList[j].checked);//只要有任何一个选择框checked是false，假设被推翻if(checkList[j].checked == false){isAllOk = false;};};//3.3 根据开关结果实现需求checkAll.checked = isAllOk;// if(isAllOk){// checkAll.checked = true;// }else{// checkAll.checked = false;// };// console.log(checkList[0].checked);// console.log(checkList[1].checked);// console.log(checkList[2].checked);};};</script>
</body>
</html>
03-获取元素语法补充
- 重点掌握选择器获取,其他仅做了解
语法 示例 描述 getElementById() document.getElementById('box') 根据id获取元素 getElementsByTagName() document.getElementsByTagName('li') 根据标签名获取元素 getElementsByClassName() document.getElementsByClassName('one') 根据类名获取元素 getElementsByName() document.getElementsByName('sex') 根据name属性值获取表单元素 querySelector() document.querySelector('选择器') 根据选择器获取满足条件第一个元素querySelectorAll() document.querySelectorAll('选择器') 根据选择器获取满足条件所有元素
1.1-innerText与innerHTML
- 作用完全不同（只是有些类似）
- 类似点：获取到的都是string类型字符串
- innerText:获取元素文本
- innerHTML:获取元素内容（文本+标签）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="box">我是班长<p>我是班长小迷妹</p>
</div><script>let box = document.querySelector('#box');//1.innerText:获取元素文本（包含子标签的文本）console.log ( box.innerText );//2.innertHTML:获取元素内容(包含标签与文本)console.log ( box.innerHTML );//3.通过分别设置一个元素的innerText与innertHTML了解两者的区别//innerText:会把所有的内容都当成文本，无法解析标签// box.innerText = '<a>我是i连接</a><p>我是p</p>';//innerHTML:可以解析字符串中的标签//作用：可以和document.write()一样动态给页面添加元素box.innerHTML = '<a>我是i连接</a><p>我是p</p>';
</script>
</body>
</html>
1.1-根据id获取页面元素
- 语法:document.getElementById(‘id名’);
- 如果没有这个id，那么会得到一个null
- 由于在html的标签元素中id具有唯一性，所以我们可以直接使用id来表示这个元素
- 这种用法不推荐，有些浏览器不支持
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="div1">我是div1</div>
<div id="div2">我是div2</div></body><script>/**1.getElementById:通过id获取元素* 参数：元素id字符串* 返回值：元素对象（又称为dom对象）/null*/let div1 = document.getElementById('div1');console.log ( div1 );console.log ( typeof div1 ); //object//2.如果没有这个id，那么会得到一个nulllet box = document.getElementById('box');console.log ( box ); //null//3.由于在html的标签元素中id具有唯一性，所以我们可以直接使用id来表示这个元素//这种用法不推荐，有些浏览器不支持console.log ( div2 );
</script>
</html>
1.2-根据标签名tagName获取页面元素
- 语法:document.getElementsByTagName(‘标签名’)
- 细节：
- （1）id具有唯一性所以获取到的要么是null要么是单个元素
- （2）标签名可以在页面存在多个，所以获取到的一定是一个伪数组，如果没有则是空数组
- 总结
- 1.如果使用document调用getElementsByTagName得到的就是整个html文档中所有的标签名元素
- 2.如果使用某一个元素对象调用getElementsByTagName得到的就是该元素下所有的标签名元素
- 3.getElementById只能由document来调用，否则会报错
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul id="oldWang"><li id="id1">隔壁老王1</li><li>隔壁老王2</li><li>隔壁老王3</li><li>隔壁老王4</li><li>隔壁老王5</li>
</ul><ul><li>隔壁老张1</li><li>隔壁老张2</li><li>隔壁老张3</li><li>隔壁老张4</li><li>隔壁老张5</li>
</ul></body><script>/**1.getElementsByTagName通过标签名获取元素*参数：标签名字符串* 返回值：标签数组(伪数组)* * 细节：（1）id具有唯一性所以获取到的要么是null要么是单个元素* （2）标签名可以在页面存在多个，所以获取到的一定是一个数组，如果没有则是空数组**/let liList = document.getElementsByTagName('li');console.log ( liList );//一定是一个数组，所以找不到则是空数组//console.log ( liList.slice () );//程序会报错，伪数组没有数组的API//2.假如我只想获取某一个元素下所有标签名的元素，可以先获取父元素对象，然后调用父元素对象的getElementsByTagName方法//2.1 先通过id获取ul标签let oldWang = document.getElementById('oldWang');//2.2 调用oldWang的getElementsByTagName方法let wangList = oldWang.getElementsByTagName('li');console.log ( wangList );/*总结1.如果使用document调用getElementsByTagName得到的就是整个html文档中所有的标签名元素2.如果使用某一个元素对象调用getElementsByTagName得到的就是该元素下所有的标签名元素3.getElementById只能由document来调用，否则会报错*///console.log ( wangList.getElementById ( "id1" ) );//这样写会报错，id只能通过document来获取</script>
</html>
1.3-根据类名className获取元素
- 语法：document.getElementsByClassName ( “类名” )
- 返回的就是一个伪数组
- 小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组 否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名 类名）都是伪数组
- 注意点:根据类名获取元素存在浏览器兼容问题，IE8及以下不支持，一般很少使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><ul id="ul1"><li class="li1">隔壁老王1</li><li class="li1">隔壁老王2</li><li class="li1">隔壁老王3</li><li class="li1">隔壁老王4</li><li class="li1">隔壁老王5</li>
</ul><ul id="ul2"><li class="li1">隔壁老张1</li><li class="li1">隔壁老张2</li><li class="li1">隔壁老张3</li><li class="li1">隔壁老张4</li><li class="li1">隔壁老张5</li>
</ul></body><script>/*本小节知识点：根据类名classNmae获取元素1.小技巧：如果API写的是Emement复数的形式，也就是后面加了s（Emements）那么它返回的就是一个伪数组否则就是单个对象，一般只有id才会是单个对象，其他方式获取（标签名 类名）都是伪数组2.根据类名获取元素存在浏览器兼容问题，IE8及以下不支持，一般很少使用*///1.获取ul1let ul1 = document.getElementById('ul1');//2.根据类名获取标签 返回的是一个伪数组console.log ( ul1.getElementsByClassName ( "li1" ) )//获取ul1元素下的所有类名为li1的标签console.log ( document.getElementsByClassName ( "li1" ) )//获取整个文档中类名为li1的标签//3.根据类型获取标签getElementsByClassName，尽量少用，改用其他方式代替//原因：存在浏览器兼容性问题，IE8及之前不支持
</script>
</html>
1.4-根据name属性值获取表单元素
- 语法:document.getElementsByName(‘表单元素name属性的值’);
- name属性是表单元素特有的默认属性，返回值也是一个伪数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><input type="text" name="one">
<input type="password" name="one">
<input type="radio" name="one">
<input type="checkbox" name="one"></body><script>/*使用name属性来获取元素，返回值也是一个伪数组* name属性是表单元素特有的默认属性*/let nameList = document.getElementsByName('one');console.log ( nameList );
</script>
</html>
04-attribute语法学习
1.1-attribute操作自定义属性语法
- 标签元素属性:
- （1）行内标准属性：input.id（针对行内）
- （2）行内自定义属性：开发追加的，html自己不能使用
- （3）js动态添加属性：可以是行内属性（系统自带的），或者自定义属性
- （4）行外属性
- 1.attribute方式 - 1.获取属性：元素.getAttribute ( “id” ) ==== 行内属性（元素.id）
- 如果是类型直接使用class，无需使用className，因为这种方式用的是字符串语法获取属性
- 2.设置属性：元素.setAttribute(‘属性名’,属性值); ==== 元素.id = 值
- 3.删除属性：元素.removeAttribute(‘属性名’); ==== delete 元素.id
- 用attribute方式设置的属性只能使用attribute方式来获取
- 2.注意点
- js点语法能获取到的属性：
- （1）行内标准属性
- （2）js点语法动态添加的自定义属性
- 不能获取到的属性：
- （1）行内自定义属性
- (2)行外属性
- getAttribute能获取到的属性：
- （1）行内标准属性
- （2）行内自定义属性
- （3）setAttribute动态添加的属性
- 不能获取到的属性：
- （1）js点语法动态添加的自定义属性
- （2）行外属性
- js点语法能获取到的属性：
- 3.总结：js点语法操作属性与attribute语法操作属性场景(语义不同)
- 标准属性操作：使用js点语法（代码简洁）
- 自定义属性操作：用attribute（易读性更高）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.one{width: 100px;height: 100px;//background-color: red;}</style>
</head>
<body><!--如果一个属性不是html中得属性，那么这个属性成为自定义属性-->
<div id="div1" class="one" aaa='啊啊啊啊'></div>
</body><script src="common.js"></script>
<script>//元素属性写法： （1）行内标准属性 （2）行外属性 (3)js动态添加得属性 （4）行内自定义属性//1.js点语法属性操作//1.1 可以拿到哪些let div1 = id('div1');div1.index = 1;div1.setAttribute('index',1);console.log ( div1.className );//行内标准属性div1.a = 'a';console.log ( div1.a )//js动态添加得属性//1.2 不可以拿到console.log ( div1.style.width );//行外属性console.log ( div1.aaa );//行内自定义属性//2. attribute方式/*获取属性： 元素.getAttribute('属性名')添加属性：元素.setAttribute('属性名',属性值);* 用setAttribute方式添加只能用getAttribute获取删除属性： 元素.removeAttribute('属性名');* a.属性名属性值全部删除，更加彻底* b.点语法只能删除属性值，不能删除属性名总结：js点语法操作属性与attribute语法操作属性场景标准属性：点语法（简洁）自定义属性：attribute（代码易读性更高）*///2.1 可以获取console.log ( div1.getAttribute ( "class" ) ); //行内标准属性 类名直接class即可console.log ( div1.getAttribute ( "aaa" ) ); //行内自定义属性//2.2 不可以获取console.log ( div1.getAttribute ( "style.width" ) ); //行外属性console.log ( div1.getAttribute ( "a" ) ); //js点语法动态添加得属性//添加属性div1.setAttribute('index',10);console.log ( div1.getAttribute ( "index" ) ) //取值 用setAttribute方式添加只能用getAttribute获取console.log ( div1.index );//3.删除属性//div1.className = ''; //属性得值没有了，属性名还在div1.removeAttribute('class'); //属性名和属性值全部删除，更加干净彻底</script>
</html>
2.自定义属性
-因为考虑到很多开发者需要在元素中自定义属性来保存数据：但是用attribute系列又比较麻烦：系统提供了一个统一的解决方案
-自定义属性规范：以data-开头，后面跟具体名字：
data-index index就是名字表示索引
data-src src就是名字表示图片的路径
js提供了一个对象：dataset对象方便操作自定义属性
dataset就是用来简化获取data-系列自定义属性的值（代替getAttribute()）
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div class="box" data-index='1'>111</div><script>// 因为考虑到很多开发者需要在元素中自定义属性来保存数据：但是用attribute系列又比较麻烦：系统提供了一个统一的解决方案// 自定义属性规范：以data-开头，后面跟具体名字：// data-index index就是名字表示索引// data-src src就是名字表示图片的路径// js提供了一个对象：dataset对象，方便操作自定义属性的// dataset就是用来简化获取data-系列自定义属性的值（代替getAttribute()）let box = document.querySelector('.box');// 可以直接通过dataset.属性名（具体名字）实现操作（获取）console.log(box.dataset);box.dataset.index = '2';console.log(box.dataset);</script>
</body></html>
**1.2-案例：隔行变色**- 需求： （1）单数行显示黄色 双数行显示绿色 （2）鼠标移入哪一个就显示红色高亮，移开就恢复原状
- 思路分析：- 1.先获取到界面所有的li标签- 2.遍历数组，实现li标签的隔行变色- 3.给每一个li标签注册鼠标移入和移出事件- 4.移入则修改颜色为红色- 对象的赋值操作先回收旧值，再赋新值- 5.移出则修改颜色为原先的颜色- 可以给对象动态添加一个属性用于存储原先的颜色```typescript<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><ul id="ul1"><li>隔壁老王1</li><li>隔壁老王2</li><li>隔壁老王3</li><li>隔壁老王4</li><li>隔壁老王5</li><li>隔壁老王6</li><li>隔壁老王7</li><li>隔壁老王8</li><li>隔壁老王9</li><li>隔壁老王10</li></ul></body><script>/*需求：（1）单数行显示黄色 双数行显示绿色 （2）鼠标移入哪一个就显示红色高亮，移开就恢复原状思路分析：* 1.先获取到界面所以的li标签* 2.遍历数组，实现li标签的隔行变色* 3.给每一个li标签注册鼠标移入和移出事件* 4.移入则修改颜色为红色* 5.移出则修改颜色为原先的颜色*///1.获取li标签列表let liList = document.querySelectorAll('li');//2.遍历数组，实现隔行变色for(let i = 0;i<liList.length;i++){if(i%2 == 0){//双数行显示绿色liList[i].style.background = 'green';}else{//单数行显示黄色liList[i].style.background = 'yellow';}//3.1 给每一个li标签注册鼠标移入和移出事件liList[i].onmouseover = function ( ) {/*（1） 修改之前我们给这个元素添加一个属性用于存储当前颜色*/this.setAttribute('defaultColor',this.style.background);//（2）如果移入则修改颜色为红色高亮this.style.background = 'red';}//3.2 移出liList[i].onmouseout = function ( ) {//如果移出则修改颜色为之前的颜色this.style.background = this.getAttribute('defaultColor');}}</script></html>
05-核心案例(tab栏切换)
1.1-tab栏切换02（作业）
<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}ul {list-style: none;}.box {width: 400px;height: 300px;border: 1px solid #ccc;margin: 100px auto;}.hd {height: 45px;}.hd span {display: inline-block;/*将行内元素转换成行内块元素，宽高才起作用*/width: 90px;background-color: pink;line-height: 45px;text-align: center;cursor: pointer;}.hd span.current {/*交集选择器，标签指定式选择器*/background-color: purple;/*紫色*/}.bd li {height: 255px;background-color: purple;display: none;/*设置隐藏*/}.bd li.current {display: block;/*显示*/}</style>
</head><body><div class="box" id="box"><div class="hd"><span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span></div><div class="bd"><ul id="list"><li class="current">我是体育模块</li><li>我的娱乐模块</li><li id="li3">我是新闻模块</li><li>我是综合模块</li></ul></div></div><script>// 1. 获取所有的span和lilet spans = document.querySelectorAll('.hd>span');let lis = document.querySelectorAll('#list>li');// 2. 给所有的span绑定鼠标移入事件：onmouseoverspans.forEach(function (item, index) {// index代表每个span的下标，但是最终每个li也是对应的位置// span与li共享下标item.onmouseover = function () {// 3. 事件处理：排他：span和li都需要排他// 3.1 排他：将所有的类似的元素都变成统一的效果spans.forEach(function (sp) {sp.classList.remove('current');});lis.forEach(function (li) {li.classList.remove('current');});// 3.2 排他：让当前元素有特效item.classList.add('current');lis[index].classList.add('current');};});</script>
</body></html>
1.2-京东商品展示
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}ul {list-style: none;padding-top: 15px;}.box {width: 350px;height: 420px;border: 1px solid #000;margin: 100px auto;}li {float: left;width: 20%;text-align: center;}img:hover {outline: 3px solid #0094ff;}</style>
</head>
<body><div class="box"><div><img src="images/b1.jpg" id="big" alt=""/></div><div><ul id="ul"><!--data-src是自定义属性，存放对应大图的src--><li data-src="images/b1.jpg"><img src="images/s1.jpg" alt=""/></li><li data-src="images/b2.jpg"><img src="images/s2.jpg" alt=""/></li><li data-src="images/b3.jpg"><img src="images/s3.jpg" alt=""/></li><li data-src="images/b4.jpg"><img src="images/s4.jpg" alt=""/></li><li data-src="images/b5.jpg"><img src="images/s5.jpg" alt=""/></li></ul></div></div><script>/*1.分析需求(交互)：点击底部li元素：取出当前点击li元素的自定义属性data-src , 赋值给上面img的src属性2.思路分析（事件三要素）获取元素：事件源：注册事件：事件类型事件处理：*///1.获取元素let big = document.querySelector('#big');//大图片let liList = document.querySelectorAll('#ul>li');//小图片列表//2.循环小图片列表for(let i = 0;i<liList.length;i++){//2.1 给每一个小图片添加点击事件liList[i].onclick = function ( ) {//3.1 获取li标签的自定义属性data-srclet src = this.getAttribute('data-src');//3.2 设置大图片的src属性为自己的href属性big.src = src;}}</script>
</body>
</html>
1.3-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.selected {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 selected"><a href="###"><img src="images1/guojidapai.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="images1/guozhuangmingpin.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="images1/qingjieyongpin.jpg" alt=""/></a></div><div class="main"><a href="###"><img src="images1/nanshijingpin.jpg" alt=""/></a></div></div>
</div><script src="common.js"></script>
<script>/*1.分析需求(交互)：点击上方li元素 ： 排他思想修改样式 a. 自身添加类名active，其他li元素移除类名activeb. 下方对应的div(下标一致)显示，其他div隐藏2.思路分析（事件三要素）获取元素：事件源：注册事件：事件类型事件处理：*///1.获取元素let liList = document.querySelectorAll('.tab>li');//顶部li标签列表let productsList = document.querySelectorAll('.products>div');//商品详情div列表//2.添加事件//2.1 遍历liListfor(let i = 0;i<liList.length;i++){//2.2 给每一个li标签添加自定义属性liList[i].setAttribute('index',i);//2.3 给每一个li标签添加点击事件liList[i].onclick = function ( ) {//3.1 获取当前点击li元素下标let index = this.getAttribute('index');//3.2 排他思想修改样式 for(let j = 0;j<liList.length;j++){if(j == index){liList[j].className += ' active';//这里有两个类名 注意中间空格productsList[j].style.display = 'block';}else{liList[j].className = 'tab-item';//默认类名样式productsList[j].style.display = 'none';};} ;};};</script>
</body>
</html>
更多推荐
排他思想 开关思想 获取元素语法补充 attribute语法学习 自定义属性data-* tab栏切换
发布评论