切換的DIV使用jQuery

在頁面上我有在我的頁面的頂部這意味着可以作爲標籤，當一個人被點擊我想它的DIV顯示和隱藏休息一行鏈接。我真的不確定最好的方式去做這件事。切換的DIV使用jQuery

我的淵源是什麼想出了：

$("#overall").click(function(){ 
    if ($("#overall").is(":hidden")) 
    { 
     $("#hourly-div").hide("fast"); 
     $("#daily-div").hide("fast"); 
     $("#monthly-div").hide("fast"); 
     $("#overall-div").show("fast"); 
    } 
});

但是我發現這根本不能很好地工作。我應該檢查DIV的CSS是否爲display: hidden;？

標記下方。

<ul class="stats"> 
     <li><a href="#" id="overall">Overall stats</a></li> 
     <li class="sep">|</li> 
     <li><a href="#" id="hourly">Hourly Bandwidth</a></li> 
     <li class="sep">|</li> 
     <li><a href="#" id="daily">Daily Bandwidth</a></li> 
     <li class="sep">|</li> 
     <li><a href="#" id="monthly">Monthly Bandwidth</a></li> 
    </ul> 
    <div id="overall-div"> 
     overall 
    </div> 
    <div id="hourly-div" style="display: none;"> 
     hourly 
    </div> 
    <div id="daily-div" style="display: none;"> 
     daily 
    </div> 
    <div id="monthly-div" style="display: none;"> 
     monthly 
    </div>

我想要的overall DIV當用戶加載頁面，並要隱藏的休息，直到用戶點擊一個標籤爲他們展示。

謝謝。 :)

來源

2009-12-16 Matt

我不明白。如果您的用戶隱藏，您將如何點擊一個div？ – 2009-12-16 16:17:59

他們點擊頁面頂部的鏈接，進入功能來顯示/隱藏DIV :)這就是UL在標記上的用途。 – Matt 2009-12-16 16:19:02

喜歡的東西：

$('ul.stats a').click(function(e) { 
    $('#' + this.id + '-div').show().siblings('[id$=-div]').hide(); 
    e.preventDefault(); 
});

來源

2009-12-16 16:21:09 David

嗨，這似乎是最簡單的回答，但如果我用這個代碼，我點擊一個選項卡鏈接，在頁面（而不僅僅是其他選項卡的div）上隱藏的一切，只能說明我點擊了標籤。謝謝回覆。 – Matt 2009-12-16 16:28:26

是的，只是修正它，因此它的目標是一個以「-div」結尾的ID。 – David 2009-12-16 16:29:49

非常感謝。奇蹟般有效。 :) – Matt 2009-12-16 16:30:58

去它的最好方法是使用jQuery UI和tabs插件。如果你必須自己實現一個選項卡式接口，至少應該看看他們的代碼，瞭解如何去實現它。請注意，您不必下載整個UI代碼即可使用這些選項卡。您可以通過將下載限制爲您需要的那些組件來縮小下載量。

<div class="tabs"> 
    <ul class="stats"> 
      <li><a href="#overall-div" id="overall">Overall stats</a></li> 
      <li><a href="#hourly-div" id="hourly">Hourly Bandwidth</a></li> 
      <li><a href="#daily-div" id="daily">Daily Bandwidth</a></li> 
      <li><a href="#monthly-div" id="monthly">Monthly Bandwidth</a></li> 
    </ul> 
    <div id="overall-div"> 
      overall 
    </div> 
    <div id="hourly-div"> 
      hourly 
    </div> 
    <div id="daily-div"> 
      daily 
    </div> 
    <div id="monthly-div"> 
      monthly 
    </div> 
</div> 

<script type="text/javascript"> 
    $(function() { 
     $('.tabs').tabs(); // that's it unless you want to customize 
    }); 
</script>

一個不錯的好處是如果用戶已禁用JavaScript，它工作得很好。

來源

2009-12-16 16:17:32 tvanfosson

下面是我已經做到了，這添加到單擊事件：

if(jQuery){ 
    jQuery('.tab').removeClass('show'); 
    jQuery('#skills').addClass('show'); 
    return false; 
};

和css：

div.tab {display:none;} 
div.show {display:block;}

來源

2009-12-16 16:22:14

切換的DIV使用jQuery

回答

相關問題