【Js-day3】选项卡切换

原理：点击当前选项卡时，将所有选项卡清除类名，为当前选项卡添加类名（排他）

原生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");
  })

}