1. 选项卡切换
思路
- 1. 查找到选项卡元素
- 2. 对选项卡里的每个button都设置监听事件
- 3. 找到事件发生的button
- 4. 先清除选项卡内激活的按钮
- 5. 为现在触发的按钮添加active类
* 清除激活按钮的 active类
+ 1. 通过active查找到 激活的按钮
+ 2.判断如果存在这样的按钮
+ 3. 将按钮的 active类移除
具体代码如下
// Ada
// 选项卡切换
// 给多个元素挂上同一个事件
// 选择多个元素使用函数 querySelectorAll
var buttons = document.querySelectorAll('.radio-button')
// 循环遍历每个元素, 并且绑定点击事件
for (var i = 0; i < buttons.length; i++) {
var button = buttons[i]
button.addEventListener('click', function(event){
// 注意, 这次我们直接定义了函数作为参数传递, 这样做是合法的
// 另外, 我们增加了一个 event 参数
// 浏览器会给事件响应函数传递一个参数, 它代表了事件本身
// 我们可以用 event.target 取出响应事件的元素
var self = event.target
// clearActive 函数是我们自己定义的
// 目的是删除其他元素的 active class
clearActive()
// add 可以增加一个 class
self.classList.add('active')
})
}
var clearActive = function() {
var s = document.querySelector('.active')
if (s != null) {
// 使用 classList 可以访问一个元素的所有 class
// remove 可以删除一个 class
s.classList.remove("active")
}
}
具体实现效果如下
【暂时没贴】