jQuery隱藏div，以新內容顯示div

我試圖收回我的div，然後根據他們點擊哪個鏈接顯示新內容。jQuery隱藏div，以新內容顯示div

HTML：

JS：

<script type="text/javascript"> 
     $(document).ready(function(){ 
      $("a.menu").click(function() { 
       var clicked = $(this).attr('title'); 
       $(".content").hide('slide', {direction: 'right'}, 1000); 
       $("#"+clicked).show('slide', {direction: 'left'}, 1000); 
      }); 
     }); 
    </script>

CSS：

.content { 
position: absolute; 

left:303px; 
top: 200px; 
width: 100%; 

margin-top: 200px; 
background: #6c7373; 

} 

#content_1, #content_2, #content_3 { 
display: none; 
}

什麼情況是：在div收縮，但不會再出現在所有的，什麼錯誤這裏？

謝謝。

來源

2013-03-09 speak

你可以顯示菜單嗎？我懷疑標題與內容ID不匹配。 – tvanfosson 2013-03-09 03:32:39

加入到我的原帖 – speak 2013-03-09 03:35:29

將外部.content更改爲.content-wrapper。

來源

2013-03-09 03:28:56 pdoherty926

修正了它 - 但爲什麼？另外，如何讓content_1在網頁加載時顯示？ – speak 2013-03-09 03:38:23

外部div被隱藏（因爲它具有相同的類），然後再也不顯示。 – pdoherty926 2013-03-09 03:41:53

您可以使用相同的代碼在頁面加載中顯示＃content_1：'$（「＃content_1」）。show（'slide'，{direction：'left'}，1000）;' – pdoherty926 2013-03-09 03:43:23

顯示和隱藏都在同一時間工作。爲了避免衝突（而不是隱藏然後顯示，是可見的內容，如果用戶點擊兩次相同的項目），顯示出你想要的，並通過選擇它們隱藏其他siblings()

Working demo

$("a.menu").click(function() { 
    var clicked = $(this).attr('title'); 
    $("#"+clicked).show(1000).siblings().hide(1000); 
});

這也將解決你已經給包裝器分類.content的問題。

此外你的ul結構是錯誤的。你需要裏面的一個標籤。 li必須在ul之後直接出現。

來源

2013-03-09 03:36:18 Popnoodles

謝謝您的解決方案無法正常工作但我已經通過li標籤進行了修改。謝謝！ – speak 2013-03-09 03:40:55

有趣的是，它適用於我給出的jsfiddle示例！ – Popnoodles 2013-03-09 03:41:45

它說了很多關於我的糟糕代碼的其餘部分不是與它一起工作而是關於你的，不用擔心！ – speak 2013-03-09 03:42:45

首先，請注意，所有潛在DIV的容器都有content類，因此它也被隱藏起來。由於容器是隱藏的，因此如果您「顯示」其中一個包含的元素，則無關緊要。其次，請注意，「隱藏」語句和「顯示」語句將具有競爭條件，因爲它們都適用於被隱藏的元素。最好在隱藏操作的回調中顯示該項目或將其從隱藏中排除。

<div class="content_wrapper"> <!-- give it a different class --> 
     test 
    <div id="content_1" class="content"> 
     content1 
    </div> 
    <div id="content_2" class="content"> 
     content2 
    </div> 
    <div id="content_3" class="content"> 
     content3 
    </div> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $("a.menu").click(function() { 
      var clickedID = '#' + $(this).attr('title'); 
      $(".content:not(" + clickedID +")").hide('slide', {direction: 'right'}, 1000); 
      $(clickedID).show('slide', {direction: 'left'}, 1000); 
     }); 
    }); 
</script>

來源

2013-03-09 03:38:35 tvanfosson

謝謝你解決這個困惑。現在明白它好多了。 – speak 2013-03-09 03:40:25

jQuery隱藏div，以新內容顯示div

回答

相關問題