Question

所以情况是这样的：

我有几个链接，每个链接都有一个隐藏的div，需要在用户单击特定链接时显示。当然，来自另一个链接的已经可见的div需要隐藏在同一个操作中。默认情况下隐藏所有div。我认为最简单的方法是将一个id激活的id分配给被点击的链接的子div，然后show（）#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>

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
      });
   });

});

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

4 个答案: