JQuery переключается между различными divs

Question

Мне нужно какое-то практическое решение для переключения между разными div, когда я нажимаю на привязную метку.

Я сделал JSfiddle, который является своего рода решением, которое я хочу. проблема возникает, когда я сначала нажимаю на «показать 1», а затем «показать 2» исчезли два первых содержимого заполнителей, но ничего нового не появилось.

Я хочу, чтобы это так: Когда я нажимаю "шоу 1", появляются два заполнителей (PlaceHolder 1 и 2). При нажатии "show 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

Вы получите большую гибкость и производительность, выбрав идентификаторы якорных меток. Вы также должны скрыть конкретные 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(); 
});