使用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導航欄，如何一次顯示/隱藏一個內容？

回答

相關問題