0

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

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

到目前为止我在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;}

JS

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

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


});   
});
4

2 回答 2

2

试试这个代码：

$(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-03T04:05:35.480 回答
0

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

希望这可以帮助，

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

或者您可以使用.hide()= http://api.jquery.com/hide/ http://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-03T04:06:57.723 回答