原理:点击当前选项卡时,将所有选项卡清除类名,为当前选项卡添加类名(排他)
原生js代码:
function init() {
let tabs = document.querySelector(".tabs").getElementsByTagName("div");
let content = document.querySelector("#content").getElementsByTagName("div");
for (let i=0; i<tabs.length; i++) {
tabs[i].addEventListener("click",function() {
for(let j=0; j<tabs.length; j++){
tabs[j].classList.remove("active");
content[j].classList.remove("active");
}
tabs[i].classList.add("active");
content[i].classList.add("active");
})
}
}
jQuery代码:
由于为每个选项卡添加click时为隐式迭代,当要获取当前点击元素的index可以用$(this).index()。
function init() {
$(".tabs div").click(function () {
let index = $(this).index();
$(this).addClass("active").siblings("div").removeClass("active");
$("#content div").eq(index).addClass("active").siblings("div").removeClass("active");
})
}