Показать и скрыть несколько дивы при нажатии на ссылки

Question

Так что ситуация такова:

У меня есть несколько ссылок, каждый с одним скрытым DIV, который должен быть показан, когда пользователь щелкает по конкретной ссылке. Конечно, уже видимый div из другой ссылки должен быть скрыт в той же операции. По умолчанию все div скрыты. Я думал, что самый простой способ - назначить id активному дочернему div ссылки, а затем show() #active, затем при каждом нажатии на другой div я бы спрятал #active id, назначил его снова другому div, а затем покажет идентификатор. Возможно ли и как выглядит код? Да Я новичок в JQuery. Код html выглядит так:

<div class="nav"> 
    <ul> 
     <li><a href="#" title="show phone #(403) 454-5526">Call us</a> 
      <div class="navLinks"> (403) 454-5526 </div> 
     </li> 
     <li><a href="#">Visit our website</a> 
       <div class="navLinks"> Content Here </div> 
     </li> 
     <li><a href="#"Email us</a> 
       <div class="navLinks"> Content Here </div> 
     </li> 
     <li><a href="#">Send to a friend</a> 
       <div class="navLinks"> Content Here </div> 
     </li> 
    </ul> 
</div> 

Answer 1

Как насчет чего-то подобного?

$(".nav a").on("click", function(e) { 
    var div = $(this).siblings(".navLinks").toggle(); 
    $(".navLinks").not(div).hide(); 
    e.preventDefault(); 
});​ 

DEMO:http://jsfiddle.net/4ncew/1/

Answer 2

Попробуйте это Demo

$('.nav li a').click(function(){  
    $('.navLinks').css('display', 'none'); 
    $(this).next().css('display', 'block'); 
});​ 

Answer 3

Это должно делать то, что вам нужно:

​$​(document).ready(function(){ 
    $('.nav ul li a').click(function(){ 
     $('.navLinks').css('display','none'); 
     $(this).siblings('.navLinks').css('display','block'); 
    });  
});​​​​ 

Вот jsfiddle для вас, чтобы проверить его : http://jsfiddle.net/2H4zD/3/

Answer 4

Я приклеил здесь, попробуйте сами: http://jsfiddle.net/Y97F8/

Вот код, который делает это:

jQuery(function(){ 

    //hide all first 
    jQuery(".navLinks").hide(); //hide others 

    jQuery(".nav ul li a").each(function(i) { 
     jQuery(".nav ul li a").eq(i).click(function() { 
     jQuery(".navLinks").hide(); //hide others 
     jQuery(".nav ul li a").eq(i).next().show(); //show the div at the specified index 
     }); 
    }); 

});​