-1

グループ名のリストが 1 つあります。

<ul id="groups" >
  <li id="group1" ></li>
  <li id="group2" ></li>
  <li id="group3"></li>
</ul>

スライドコンテナ

 <div id="containers" >
    <ul id="container1" >
      Lorem ipsum ..
    </ul>

    <ul id="container2" >
          Lorem ipsum ..
        </ul>

    <ul id="container3" >
          Lorem ipsum ..
        </ul>
  </div>

私がやりたいことは、グループをクリックすると、既存のコンテナが非表示になり、新しいコンテナが表示されることです。

4

2 に答える 2

1 
function hideAll() {
    $("#container1 #containter2 #container3").hide();
}

$("#group1").click(function(){
    hideAll();
    $("#container1").show();
}

$("#group2").click(function(){
    hideAll();
    $("#container2").show();
}

$("#group3").click(function(){
    hideAll();
    $("#container3").show();
}

高速で残忍ですが、要素の数が少ない場合は機能する可能性があります。もっとたくさんある場合は、クラス（$(".container").hide();）などに分割する必要があります。

于 2011-07-31T22:49:35.703 に答える
1 
$("#groups > *").live('click', function() {
    var linkIndex=parseInt($(this).attr('id').match(/[0-9]+/)[0], 10);
    $("#containers > *").slideUp('slow');
    $("#containers > *").filter(function() {
        var containerIndex=parseInt($(this).attr('id').match(/[0-9]+/)[0], 10);
        return containerIndex==linkIndex;
    }).slideDown('slow');
});

ここで(わずかに変更された) バージョンのデモを行うことができます。

于 2011-07-31T22:53:49.723 に答える