JavaScript показать/скрыть вкладку

Question

Что я хочу - сначала скрыть все содержимое, а затем щелкнуть по одной вкладке, отобразится соответствующий контент (вкладка станет активной), где щелкнуть ее снова, она исчезнет. некоторые из вкладок - это просто ссылка «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> 

Пожалуйста, попробуйте выше код .. меняю HREF значение просто "#", то некоторые изменения в JQuery. Пожалуйста, спросите в комментарии, если у вас есть какие-либо сомнения. click here to test