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"// 点击的第几个tabsconsole.log(tabIndex)}
}

代码

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

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

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！