Js 经典案例

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")
    }
}

具体实现效果如下
【暂时没贴】