JavaScriptを表示/非表示にする

Question

最初にすべてのコンテンツを非表示にしてから、1つのタブをクリックすると、対応するコンテンツが表示されます（タブがアクティブになります）。いくつかのタブは単なる「mailto」リンクです。

問題は、ナビゲーション・コードは、次のされて再び

$(document).ready(function(){ 
    $('#nav div').hide(); 
    $('#nav div:first').show(); 
    $('#nav ul li:first').addClass('active'); 
    $('#nav ul li a').click(function(){ 
     $('#nav div').hide(); 
     $('#nav ul li').removeClass('active'); 
     $(this).parent().addClass('active'); 
     var currentTab = $(this).attr('href'); 
     if($(currentTab).css('display')=='none'){ 
      $(currentTab).show(); 
     }else{ 
      $(currentTab).hide(); 
     } 

    } 
); 
}); 

をクリックしたときに、私は、タブを隠すことができないですし

<div id="nav"> 
    <ul> 
     <li><a href="#about">About</a></li> 
     <li><a href="mailto:email">Email</a></li> 
     <li><a href="#contact">Contact</a></li> 
    </ul> 
    <div id="about"> 
     about 
    </div> 
    <div id="contact"> 
     contact 
    </div> 
</div> 

Answer 1

これは動作するはずです：

$(function() { 
    $('#nav div').hide(); 
    $('#nav div:first').show(); 
    $('#nav ul li:first').addClass('active'); 
    $('#nav ul li a').click(function(){ 
     var currentTab = $(this).attr('href'); 
     var vis = $(currentTab).is(':visible'); 
     $('#nav div').hide(); 
     $('#nav ul li').removeClass('active'); 
     $(this).parent().addClass('active'); 
     if(vis) { 
      $(currentTab).hide(); 
     } else { 
      $(currentTab).show(); 
     } 
    }); 
}); 

あなたは現在のタブでは、それを隠す前に表示されているかどうかを確認する必要があります。

作業：http://jsfiddle.net/tqhHA/

Answer 2

変更クリック機能：

$('#nav ul li a').click(function(){ 
    var currentTab = $(this).attr('href'); 
    $('#nav div').not(currentTab).hide(); 
    $('#nav ul li').removeClass('active'); 
    $(this).parent().toggleClass('active');  
    if (currentTab.indexOf("mailto:") === -1) 
    { 
     $(currentTab).toggle(); 
    } 
}); 

Working example

Answer 3

$(document).ready(function(){ 
$('#nav div').hide(); 
$('#nav div:first').show(); 
$('a').click(function(){  
    var currentTab = '#'+$(this).text().toLowerCase(); 
    if($(currentTab).is(':visible')){ 
     $('#nav div').hide(); 
     $(currentTab).hide(); 
    }else{ 
     $('#nav div').hide(); 
     $(currentTab).show(); 
    } 
} 
); 
}); 


<div id="nav"> 
    <ul> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Email</a></li> 
     <li><a href="#">Contact</a></li> 
    </ul> 
    <div id="about"> 
     about 
    </div> 
    <div id="contact"> 
     contact 
    </div> 
</div> 

私はjqueryの中にいくつかの変更を行ってちょうど "＃" にhrefの値を変更。..コードの上にしてみてください。ご不明な点がございましたら、ご質問ください。click here to test