我正在使用 JS 通过单击带有 jquery 函数fadeIn() 和 fadeOut() 的侧导航来显示/隐藏 div。我遇到的问题是一个 div 淡出,下一个同时淡入。此外,如果我单击已显示的 div 的链接,它会淡出并再次淡入。我不确定 IF 语句是否是进行两个修复的最佳方法:
1. 在下一个开始淡入之前让显示的 div 完全淡出。
2. 当前显示的 div 如果单击相同的链接将不会淡出/淡入。
这是我到目前为止所拥有的(没有我对 IF 语句的失败尝试):http:
//jsfiddle.net/k55Cw/1/
HTML:
<div class="container">
<header>
<ul class="sidenav">
<li><h2><a data-region="nav-1" href="#">About</a></h2></li>
<li><h2><a data-region="nav-2" href="#">Services</a></h2></li>
<li><h2><a data-region="nav-3" href="#">Team</a></h2></li>
<li><h2><a data-region="nav-4" href="#">News</a></h2></li>
<li><h2><a data-region="nav-5" href="#">Contact</a></h2></li>
</ul>
</header>
<div id="nav-1" class="infozone"><p>Hello I'm box 1.</p></div>
<div id="nav-2" class="infozone"><p>Hello I'm box 2.</p></div>
<div id="nav-3" class="infozone"><p>Hello I'm box 3.</p></div>
<div id="nav-4" class="infozone"><p>Hello I'm box 4.</p></div>
<div id="nav-5" class="infozone"><p>Hello I'm box 5.</p></div>
</div>
CSS:
.infozone{
float:left;
height:400px;
width:800px;
background-color: #000;
display:none;
}
JS:
$(document).ready(function() {
$('.sidenav a').click(function(){
$('.infozone').fadeOut(850);
var region = $(this).attr('data-region');
$('#' + region).fadeIn(850);
});
});