用Javascript而不是jQuery编写

Question

嗨，我已经习惯了用jQuery编写代码，现在想学习用普通的Javascript编写代码。我用这个例子来显示和隐藏一些选项卡，使用的jQuery，工作正常，但是在JavaScript中如何用不同的方式来编写呢？

我试着比较它们的写法有多不同，这样我就能更好地理解它。如有任何关于如何完成此操作的帮助/提示，将不胜感激。

null

setTimeout(function() {
    $('.tabContainer a').click(function(event) {
      event.preventDefault();
      $(this).parent().addClass("current");  
      $(this).parent().siblings().removeClass("current");    
      var activeTab = $(this).attr("href");
      $('.tabContent').not(activeTab).css("display","none");
      $(activeTab).fadeIn();
    });
  },1000);

.tabContent {display: none;}
#tab1 {display: block;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
  <ul class="tabContainer">
    <li class="current"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  
  <div id="tab1" class="tabContent">Tab 1</div>
  <div id="tab2" class="tabContent">Tab 2</div>
  <div id="tab3" class="tabContent">Tab 3</div>
</div>

null

Answer 1

除FADEIN外，您可以尝试以下方式：

null

setTimeout(function() {
    //get all a elements and loop through them
    document.querySelectorAll('.tabContainer a').forEach(function(el){
      
      //attach click event to the current element
      el.addEventListener('click', function(event) {
        event.preventDefault();
        
        //remove the class current from all 
        this.closest('.tabContainer')
          .querySelector('.current')
          .classList.remove("current");
        
        //add the class current to the current element's closest li
        this.closest('li').classList.add("current");
        
        //set display style none to all
        document.querySelectorAll('.tabContent').forEach(function(a){
          a.style.display = "none";
        });
        var activeTab = this.getAttribute("href");
        
        //set display style block to the mached element
        document.querySelector(activeTab).style.display = "block";
      });
    
    });
}, 1000);

.tabContent {display: none;}
#tab1 {display: block;}

html lang-html prettyprint-override"><div class="tabWrapper">
  <ul class="tabContainer">
    <li class="current"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
  </ul>
  
  <div id="tab1" class="tabContent">Tab 1</div>
  <div id="tab2" class="tabContent">Tab 2</div>
  <div id="tab3" class="tabContent">Tab 3</div>
</div>