javascript - 用 Javascript 而不是 jQuery 编写这个

Question

嗨，我习惯于用 jQuery 编写代码，并想学习用纯 Javascript 编写代码。我有这个例子来显示和隐藏一些使用 jQuery 的选项卡，它工作正常，但是在 Javascript 中如何以不同的方式编写？

我正在尝试比较它们的编写方式有何不同，以便更好地理解它。任何有关如何完成此操作的帮助/提示将不胜感激。

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>

标签： javascriptjquery

Answer 1

除了淡入淡出之外，您可以尝试以下方式：

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;}

<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>