JavaScript顯示/隱藏選項卡

我想要的是先隱藏所有內容，然後單擊一個選項卡，相應的內容顯示（該選項卡變爲「活動」），再次單擊它將消失。一些標籤只是一個'mailto'鏈接。JavaScript顯示/隱藏選項卡

問題是我無法隱藏的標籤時，再次點擊

$(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>

來源

2011-11-30 Rex

您有什麼問題？哪部分不工作？ – mithunsatheesh

哦，對不起！當再次點擊時不會隱藏標籤。我已經更新了這個問題。 – Rex

當點擊郵件鏈接時，你想要發生什麼？ –

這應該工作：

$(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/

來源

2011-11-30 11:14:07 Roman

更改點擊功能：

$('#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

來源

2011-11-30 11:12:17

對不起，我試過這個，但不是很工作，因爲第二次點擊不會隱藏標籤。但它很可能是我實現它錯了，謝謝！ – Rex

@Rex在我添加到我的答案 –

的示例中工作，我在示例中發現，當顯示'about'的內容時，再次單擊'about'將不會隱藏內容。 – Rex

$(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

來源

2011-11-30 11:34:18

JavaScript顯示/隱藏選項卡

回答

相關問題