使用jQuery fadeToggle导航栏，如何一次显示/隐藏一个内容？

我是很新的CSS/Jquery所以请原谅这个问题的假设简单。使用jQuery fadeToggle导航栏，如何一次显示/隐藏一个内容？

我有一个导航链接：关于和联系。我已经想出了如何淡化他们的内容。但是，如果您点击一个链接后跟另一个链接，则它们的内容会依次淡入/淡出并堆叠在一起。我希望每个链接的内容在单击不同链接时自动淡出。例如，如果用户点击“联系人”，联系人信息将淡入。然后，如果用户点击“关于”，我希望联系人信息淡出并且淡入信息。任何人都可以帮忙语言？

我有什么HTML/CSS/JS至今：

<body> 

<div id="navbar">  
<ul> 
<li><a href="#" id="about">ABOUT</a></li> 
<li><a href="#" id="contact">CONTACT</a></li> 
</ul>  
</div> 

<div id="aboutcontent" class="hidden"> 
<p> ABOUT ME </p> 
</div> 

<div id="contactcontent" class="hidden"> 
<p>NAME, CITY, EMAIL, PHONE NUMBER</p> 
</div> 

</body> 
</html>

CSS：

.hidden {display:none}   
#navbar ul li { display: inline;}

$(document).ready(function(){ 
$('a#contact').click(function() { 
$('div#contactcontent').fadeToggle(); 
return false; 
}); 

$('a#about').click(function() { 
$('div#aboutcontent').fadeToggle(); 
return false; 


}); 
});

来源

2012-07-03 user1497624

试试这个代码，而不是：

$(document).ready(function(){ 

    $('a#contact').click(function(e) { 
    e.preventDefault(); 
    $('div#aboutcontent').hide();  
    $('div#contactcontent').fadeIn(); 
    }); 


    $('a#about').click(function(e) { 
    e.preventDefault(); 
    $('div#contactcontent').hide(); 
    $('div#aboutcontent').fadeIn(); 
    }); 

});

这里你可以看到一个工作示例：http://jsfiddle.net/ECBhr/1/

来源

2012-07-03 04:05:35

+1 ZEE T恤的男人！ –

谢谢，这正是我想要实现的！ – user1497624

这样你的意思演示：http://jsfiddle.net/hgVLH/3/

希望这有助于

API：http://api.jquery.com/fadeOut/

，或者你可以使用.hide() =h TTP：//jsfiddle.net/hgVLH/4/或http://jsfiddle.net/hgVLH/5/

代码

$(document).ready(function() { 
    $('a#contact').click(function() { 
     $('div#aboutcontent').fadeOut(); 
     $('div#contactcontent').fadeToggle(); 
     return false; 
    }); 

    $('a#about').click(function() { 
     $('div#contactcontent').fadeOut(); 
     $('div#aboutcontent').fadeToggle(); 
     return false; 


    }); 
});

来源

2012-07-03 04:06:57

感谢您的替代选择，这两个都很好。 – user1497624

@ user1497624很高兴它帮助你'：）' –

使用jQuery fadeToggle导航栏，如何一次显示/隐藏一个内容？

回答

相关问题