Fatal编程技术网
  • jquery/
  • 使用jQuery fadeToggle作为导航栏，如何一次显示/隐藏一个内容？

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

jquery navigation

使用jQuery fadeToggle作为导航栏，如何一次显示/隐藏一个内容？,jquery,navigation,toggle,Jquery,Navigation,Toggle,我对CSS/Jquery非常陌生，所以请原谅这个问题假设的简单性 我有一个导航链接：关于和联系。我已经想出了如何淡入淡出他们的内容。但是，如果单击一个链接后再单击另一个链接，则它们的内容会依次淡入/淡出，并堆叠在彼此的顶部。我想为每个链接的内容自动淡出，如果一个不同的链接是点击。例如，如果用户单击“联系人”，联系人信息将淡入。然后，如果用户单击“关于”，我希望联系人信息淡出，关于信息淡入。有人能用俗语帮忙吗 到目前为止，我在HTML/CSS/JS中的内容： <body> <d

我对CSS/Jquery非常陌生，所以请原谅这个问题假设的简单性

我有一个导航链接：关于和联系。我已经想出了如何淡入淡出他们的内容。但是，如果单击一个链接后再单击另一个链接，则它们的内容会依次淡入/淡出，并堆叠在彼此的顶部。我想为每个链接的内容自动淡出，如果一个不同的链接是点击。例如，如果用户单击“联系人”，联系人信息将淡入。然后，如果用户单击“关于”，我希望联系人信息淡出，关于信息淡入。有人能用俗语帮忙吗

到目前为止，我在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>
JS

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

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


});   
});
请尝试以下代码：

$(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();  
  });   

});
您可以在这里看到一个工作示例：

您的意思是演示：

希望这有帮助

API:

或者您可以使用
.hide（）
=http://jsfiddle.net/hgVLH/4/ 或

代码

$(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;


    });
});
@用户1497624很高兴它帮助了您
：）
$(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;


    });
});