嗨，我已经习惯了用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
除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;}<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>