JQuery在不同div之間切換

Question

我需要某種實用的解決方案來切換不同的div，當我點擊一個錨標籤時。

我做了一個JSfiddle，這是我想要的解決方案。 有問題，當我第一次點擊「show 1」然後「show 2」這兩個第一個佔位符內容消失了，但沒有什麼新的顯示出來。

我想這樣說： 當我點擊「節目1」，兩個佔位符出現（佔位符1和2）。 當點擊「顯示2」無關閉佔位符1和2。 PlaceHolder 1和2應該關閉和PlaceHolder 3應該出現。

的jsfiddle：http://jsfiddle.net/CY3tj/2/

HTML：

<a id="1" class="show">show 1</a> 
<br/ ><br/ > 
<a id="2" class="show">show 2</a> 

<div class="content-wrapper"> 
    <div id="item-1">   
     <div> 
      <h2>Placeholder1</h2> 
      <p>Placeholder1</p> 
     </div> 
     <div> 
      <h2>PLaceHolder2</h2> 
      <p>Placeholder2</p> 
     </div> 
    </div>  
     <div id="item-2">    
      <div> 
       <h2>Placeholder3</h2> 
       <p>Placeholder3</p> 
      </div>    
     </div>  
</div> 

JQuery的：

$(document).ready(function() { 
    $(".content-wrapper").hide(); 
}); 

$(document.body).on("click", "a.show", function() { 
    var id = $(this).attr("id"); 
    $(".content-wrapper > div").each(function() { 
     if ($(this).attr("id") == "item-" + id) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 
    }); 
    $(".content-wrapper").toggle(); 
}); 

Answer 1

您可以簡化這：

$(function(){ 
    var $allItems = $(".content-wrapper > div"); //Cache the collection here. 
    $(document).on("click", "a.show", function() { 
     var id = this.id, itemId = "#item-" + id; //get the id and itemId 
     $allItems.not($(itemId).toggle()).hide(); //Hide all items but not the one which is the target for which you will do a toggle 
    }); 
}); 

Demo

而不是通過JS隱藏包裝，你可以添加一個規則來隱藏其內容。

.content-wrapper >div{ 
    display:none; 
} 

Answer 2

你的主要問題是你使用$(.content-wrapper).toggle()你只想隱藏content wrapper開始，然後後點擊你想讓它顯示出來。通過toggling你的內容包裝，你讓它消失每隔一次點擊，這就是爲什麼你必須點擊兩次才能看到它。

$(document.body).on("click", "a.show", function() { 
    var id = $(this).attr("id"); 
    $(".content-wrapper > div").each(function() { 
    if ($(this).attr("id") == "item-" + id) { 
     $(this).show(); 
    } else { 
     $(this).hide(); 
    } 
    }); 
    $(".content-wrapper").show(); 
}); 

如果您正在尋找保持切換功能（以隱藏已經顯示出一個div），這裏是一個解決方案。

$(document.body).on("click", "a.show", function() { 
    var id = $(this).attr("id"); 
    if($(".content-wrapper #item-"+id).is(':visible')) 
     $(".content-wrapper").hide(); 
    else{ 
     $(".content-wrapper").children("div").hide(); 
     $(".content-wrapper #item-"+id).show(); 
     $(".content-wrapper").show(); 
    } 
}); 

Answer 3

通過選擇錨標籤的id，您將獲得更多的靈活性和性能。你還應該隱藏你想要隱藏的特定div，而不是隱藏整個容器。這樣，您可以輕鬆定位要顯示哪個div以及要隱藏哪個div。

$(document).ready(function() { 
    $(".content-wrapper > div").hide(); 
}); 

$("#1").click(function(){ 
    $("#item-2").hide(); 
    $("#item-1").show(); 
}); 

$("#2").click(function(){ 
    $("#item-1").hide(); 
    $("#item-2").show(); 
}); 

但是，如果你正在尋找增加數目不詳的這些項目，那麼你將要選擇（爲便於閱讀）剛剛元素和類，而不是去通過文件，這是隻是多餘的。

$(document).ready(function() { 
    $(".content-wrapper > div").hide(); 
}); 

$("a.show").click(function(){ 
    $(".content-wrapper > div").hide(); 
    $("#item-" + $(this).attr("id").show(); 
});