jquery显示/隐藏div
我正在使用JS显示/隐藏div通过点击侧面导航与jquery函数fadeIn（）和fadeOut（）。 我碰到的问题是一个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);
});
});
链接动画将fadeIn放入fadeOut的回调中，并在当前显示的函数中取消该函数，检查div是否已经可见。
我还必须添加一个检查来查看当前的.infozone div是否可见 - 否则， fadeOut也适用于隐藏的元素，并且该回调触发多次：
$(document).ready(function() {
$('.sidenav a').click(function(){
var region = $(this).attr('data-region');
var $region = $('#' + region);
if ($region.is(':visible')) return;
var $infozone = $('.infozone:visible');
if ($infozone.length === 0) {
$region.fadeIn(850);
} else {
$infozone.fadeOut(850, function() {
$region.fadeIn(850);
});
}
});
});
你可以这样做：
html这使得你的页面在javascript被禁用时工作：
<header>
<ul class="sidenav">
<li><h2><a href="#nav-1">About</a></h2></li>
<li><h2><a href="#nav-2">Services</a></h2></li>
<li><h2><a href="#nav-3">Team</a></h2></li>
<li><h2><a href="#nav-4">News</a></h2></li>
<li><h2><a href="#nav-5">Contact</a></h2></li>
</ul>
</header>
请注意，href指向您要显示的ID。 如果您想使页面可访问，这也适用于屏幕阅读器。
JavaScript的。 我没有测试过，你可能不得不修复一些东西，但是这个想法就在那里
$(document).ready(function() {
$('.sidenav a').click(function(e){
var href = $(this).attr('href');
// prevent default
e.preventDefault();
// prevent clicked twice
if(!$(this).hasClass('active'){
$('.sidenav a').removeClass('active');
$(this).addClass('active'){
$('.infozone').fadeOut(850);
$(href.substring(1)).fadeIn(850);
}
});
您还应该考虑添加一些ARIA属性和角色属性。
链接地址: http://www.djcxy.com/p/64761.html