web蓝桥杯真题:折叠手风琴

代码及注释:

javascript 复制代码
const options = document.querySelectorAll('.option')
options.forEach((item1, index, arr) => {    //循环每个元素都绑定点击事件
    item1.addEventListener('click', () => { 
        arr.forEach(item2 => {      //先把所有元素的active类名删掉
            item2.classList.remove('active')
        })
        item1.classList.add('active')    //给点击元素添加active类名
    })
})

知识点:

1.排他思想口诀:先干到所有人,再复活自己

2.添加元素:element.classList.add('类名')

3.删除元素:element.classList.remove('类名')

4.数组循环array.forEach((item, index, arr) => { })

相关推荐
程序员鱼皮3 分钟前
又一个新项目开源,让 AI 帮你盯全网热点!
javascript·ai·程序员·编程·ai编程
MXN_小南学前端9 分钟前
前端开发中 try...catch 到底怎么用?使用场景和最佳实践
javascript·vue.js
星空椰16 分钟前
JavaScript 基础进阶:分支、循环与数组实战总结
开发语言·javascript·ecmascript
小李子呢021128 分钟前
前端八股---闭包和作用域链
前端
IT_陈寒1 小时前
Redis的内存溢出坑把我整懵了,分享这个血泪教训
前端·人工智能·后端
m0_738120721 小时前
渗透测试基础ctfshow——Web应用安全与防护(五)
前端·网络·数据库·windows·python·sql·安全
Z_Wonderful1 小时前
基于 Vite 的 React+Vue 混部完整模板(含目录结构、依赖清单、启动脚本)
前端·vue.js·react.js
Rooting++1 小时前
腾讯无界微前端源码分析
前端
小嘿前端仔2 小时前
用AI读源码这件事:前端视角的实战方法论,附Vue3 reactivity源码解读示范
前端
其实防守也摸鱼2 小时前
XSS漏洞全景解析:从原理、实战利用到纵深防御
前端·网络·安全·xss·xss漏洞