js 写tab 切换样式

默认 选中第一个tab  点击那个div(或者是button)改变其颜色

 

思路1 ：js 方法

---

1. 找到所有可切换的tab （即div）

   var tabs = document.querySelectorAll(".weidu-tab >div")

      2. 循环所有tab,给每个按钮添加点击事件,并给每个div设置公共样式 点击的那个，那个              按钮变色 this.style.xxxx  否则为默认样式。

     （如果有需要可以给每个tab添加index 属性，为了后边可以知道点击的index） 

for (var i = 0; i < tabs.length; i++) {
  tabs[i].setAttribute("index", i)
  tabs[i].onclick = function () {
    let tabIndex = this.getAttribute("index")
    for (var i = 0; i < tabs.length; i++) {
       tabs[i].style.backgroundColor = "#FFF"
       tabs[i].style.color = "#2E2E3A"
    }
     this.style.backgroundColor = "#165DFF"
     this.style.color = "#FFF"
    // 点击的第几个tabs
    console.log(tabIndex)
  }
}

代码

 思路2：jq方法会简单一些

---

 1.给这个div 加一个类名为active的样式，点击时候给div加class为'active'

 2.同时移除兄弟节点的div的class为'active'的类名