默认 选中第一个tab 点击那个div(或者是button)改变其颜色
思路1 :js 方法
- 找到所有可切换的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'的类名