0

所以情况是这样的：

我有几个链接，每个链接都有一个隐藏的 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>
4

4 回答 4

1

那样的事情怎么样？

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

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

于 2012-06-26T18:15:22.120 回答
1

试试这个，演示

$('.nav li a').click(function (){     
  $('.navLinks').css('display', 'none');
  $(this).next().css('display', 'block');
});​
于 2012-06-26T18:16:21.350 回答
1

这应该做你需要的：

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

于 2012-06-26T18:16:22.983 回答
1

我贴在这里，自己试试：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
      });
   });

});​
于 2012-06-26T18:21:41.030 回答