单击链接时显示和隐藏多个 div答案

【问题标题】：Show and hide several divs when clicking on links单击链接时显示和隐藏多个 div
【发布时间】：2012-06-26 18:12:48
【问题描述】：

所以情况是这样的：

我有几个链接，每个链接都有一个隐藏的 div，需要在用户单击特定链接时显示。当然，来自另一个链接的已经可见的 div 需要在同一操作中隐藏。默认情况下，所有 div 都是隐藏的。我在想最简单的方法是为单击的链接的子 div 分配一个活动 ID，然后显示（）#active，之后每次单击另一个 div 我会隐藏 #active id，再次将其分配给另一个 div然后显示id。有可能吗？代码会是什么样子？是的，我是一个 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>

【问题讨论】：

标签： jquery

【解决方案1】：

这样的事情怎么样？

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

演示： http://jsfiddle.net/4ncew/1/

【讨论】：

我喜欢这个解决方案和 Adil 的解决方案，但是我认为我会使用这个。谢谢。

【解决方案2】：

这应该可以满足您的需要：

$(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/

【讨论】：

感谢您的帮助，但这不会隐藏已经激活的元素。
我在上次编辑时添加了该内容，请再次检查。抱歉，我错过了那个细节。

【解决方案3】：

试试这个，Demo

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

【讨论】：

【解决方案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
      });
   });

});

【讨论】：