向上滑动和向下滑动

发布于 2024-11-27 08:45:22 字数 540 浏览 1 评论 0原文

我有一份带有团体名称的列表。

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

我想做的是，当您单击组时，它会隐藏现有容器并显示新容器。

原文

I have one list with groups name.

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

and sliding containers

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

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

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

What I want to do is when you click on group it is hidding existing container and showing new one.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

坠似风落 2024-12-04 08:45:22

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();）等。

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

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

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

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

Fast and brutal but might work if you have a small number of elements. If you have a lot more, then you should break things into classes ($(".container").hide();), etc.

回复收藏 0 原文

以歌曲疗慰 2024-12-04 08:45:22

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

您可以在此处演示（稍作修改的）版本。

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

You can demo a (slightly modified) version here.

回复收藏 0 原文

~没有更多了~