0

私はCSS/Jqueryに非常に慣れていないので、この質問の想定される単純さを許してください。

ABOUTとCONTACTへのナビゲーションリンクがあります。私は彼らのコンテンツを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;}

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 に答える