单击链接时显示和隐藏多个div [英] Show and hide several divs when clicking on links

问题描述

所以情况是这样的:

我有几个链接，每个链接都有一个隐藏的div，当用户单击特定的链接时需要显示该div.当然，来自另一个链接的已经可见的div需要在同一操作中隐藏.默认情况下，所有div都是隐藏的. 我以为最简单的方法是为链接的子div分配一个活动的id，然后显示()#active，此后每次单击另一个div时，我都会隐藏#active id，然后将其再次分配给另一个div然后显示ID.有可能吗，代码看起来如何? 是的，我是一名Jquery新手. html代码如下所示:

I have several links, each with one hidden div that needs to be shown when the user clicks the specific link. Of course the already visible div from another link need to be hidden in the same operation. All of the divs are hidden by default. I was thinking that the simplest way is to assign an id active to the child div of the link clicked and then show() #active, afterwards at every click on another div I would hide the #active id, assign it again to another div and then show the id. Is it possible and how would the code look like? Yes I am a Jquery newbie. The html code looks like:

<div class="nav">
    <ul>
        <li><a href="#" title="show phone #[phone]">Call us</a>
            <div class="navLinks"> [phone] </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>

推荐答案

这样的事情怎么样?

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

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

这篇关于单击链接时显示和隐藏多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！