原生js与jQuery实现简单的tab切换特效对比

实现简单的tab切换特效是前端开发中比较基础和常见的功能之一。使用原生JS和jQuery都可以实现该功能，下面详细讲解原生JS和jQuery分别实现该功能的过程：

原生JS实现tab切换

HTML代码

先给出HTML代码，我们的tab切换控制对象为按钮(btn类名)，tab内容为tc内容的div元素:

<div class="tabs">
  <button class="btn active" data-tab="tab1">Tab1</button>
  <button class="btn" data-tab="tab2">Tab2</button>
  <button class="btn" data-tab="tab3">Tab3</button>
  <div id="tab1" class="tc active">Tab1 Content</div>
  <div id="tab2" class="tc">Tab2 Content</div>
  <div id="tab3" class="tc">Tab3 Content</div>
</div>

CSS样式

为以上HTML元素添加CSS样式，实现 active 类型的颜色区分效果

.tabs{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btn{
  padding: 8px 16px;
  background-color: #ddd;
  margin: 8px;
  border-radius: 4px;
  cursor: pointer;
}
.active{
  background-color: #4CAF50;
  color: white;
}
.tc{
  display: none;
  width: 100%;
  padding: 16px;
  text-align: center;
}
.tc.active{
  display: block;
}

JS代码

最后给出JS代码，实现点击切换功能

//获取btn按钮元素列表，并添加点击事件回调函数
const btns = document.querySelectorAll('.btn')
btns.forEach(function(btn){
  btn.addEventListener('click', function(){
    //获取要显示的tab id
    const tabId = this.getAttribute('data-tab')
    //隐藏所有tab内容元素
    document.querySelectorAll('.tc').forEach(function(tc){
      tc.classList.remove('active')
    })
    //显示当前tab内容元素
    const tab = document.querySelector('#'+tabId)
    tab.classList.add('active')
    //将active样式从当前按钮移动到新的按钮
    document.querySelectorAll('.btn').forEach(function(btn){
      btn.classList.remove('active')
    })
    this.classList.add('active')
  })
})

jQuery实现tab切换

HTML代码

与上面的例子要做出一样的tab切换功能，给出对应的HTML代码，控制对象为按钮(btn类名)，tab内容为tc内容的div元素:

<div class="tabs">
  <button class="btn active" data-tab="tab1">Tab1</button>
  <button class="btn" data-tab="tab2">Tab2</button>
  <button class="btn" data-tab="tab3">Tab3</button>
  <div id="tab1" class="tc active">Tab1 Content</div>
  <div id="tab2" class="tc">Tab2 Content</div>
  <div id="tab3" class="tc">Tab3 Content</div>
</div>

CSS样式

与上面一样，为以上HTML元素添加CSS样式:

.tabs{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.btn{
  padding: 8px 16px;
  background-color: #ddd;
  margin: 8px;
  border-radius: 4px;
  cursor: pointer;
}
.active{
  background-color: #4CAF50;
  color: white;
}
.tc{
  display: none;
  width: 100%;
  padding: 16px;
  text-align: center;
}
.tc.active{
  display: block;
}

JS代码

最后给出jQuery代码，实现点击切换功能

//获取btn按钮元素列表，并添加点击事件回调函数
$('.btn').click(function(){
  //获取要显示的tab id
  const tabId = $(this).data('tab')
  //隐藏所有tab内容元素
  $('.tc').removeClass('active')
  //显示当前tab内容元素
  $('#'+tabId).addClass('active')
  //将active样式从当前按钮移动到新的按钮
  $('.btn').removeClass('active')
  $(this).addClass('active')
})

通过上述两个示例可以发现，在实现tab切换功能时，jQuery使用起来更加方便简洁，但最终执行的代码比原生JS多一些。值得注意的是，使用jQuery需要在页面中引入jQuery库，在一些要求减少页面加载速度的场景中，建议使用原生JS实现该功能。