0

したがって、状況は次のようになります。

ユーザーが特定のリンクをクリックしたときに表示する必要がある非表示の div がそれぞれ 1 つずつあります。もちろん、別のリンクから既に表示されている div は、同じ操作で非表示にする必要があります。デフォルトでは、すべての div が非表示になっています。最も簡単な方法は、クリックされたリンクの子 div にアクティブな ID を割り当ててから show() #active を割り当てることだと考えていました。そして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 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 に答える
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 に答える