Javascript 上下滑动

我有一个组名的列表

<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>

乱数假文。。


乱数假文。。


乱数假文。。

我想做的是，当你们点击group时，它会隐藏现有的容器并显示新的容器

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（）；

），等等

---

您可以演示一个（稍加修改的）版本。

我刚刚意识到我可能已经使用了，但这也应该可以。

$("#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');
});