jQuery切换显示/隐藏默认内容

Question

我有一个显示/隐藏切换开关，如果单击菜单a，可以在内容之间切换。

在点击功能被触发之前，内容显示在defaultdiv中。

出于某种原因，如果您单击a标签之一两次，它会成功打开/关闭内容;但是，您留下了空白屏幕

这是一个糟糕的用户体验。

如何避免这种情况并确保在用户选择菜单项两次时显示默认内容？

$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
});
});

.hidden {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<a href="#show-screen">Screen</a>
<a href="#show-music">Music</a>
<a href="#show-art">Art</a>
<a href="#show-food">Food</a>
</div>
<div id="show-screen" class="show">show screen</div>
<div id="show-music" class="show">show music</div>
<div id="show-art" class="show">show art</div>
<div id="show-food" class="show">show food</div>
<div class="default">default content</div>

谢谢

Answer 1

虽然我建议使用完全不同的方法来处理此问题，但为了使您的代码正常工作，我会做这样的事情。 https://jsfiddle.net/6cnt95ap/1/

$(document).ready(function() {
var $show = $('.show');
$('.menu a').on('click', function(e) {
e.preventDefault();
$show.not(this).stop().hide(450);
$($(this).attr('href')).stop().toggle(450);
$('.default').addClass('hidden');
window.setTimeout(()=>{
var showDefault = true, divs = $('.show');
divs.each(function(){
if($(this).css("display") !=='none'){
showDefault = false;
return false;
}
});
if(showDefault){
$('.default').removeClass('hidden');  
}
}, 500)
});

})