在我的网页上,我试图做到这一点,以便当用户按下“链接1”时触发div #section1的动画扩展。如果以前有任何打开的div,它们将隐藏起来,先关闭,然后再展开#section1

展开的#section1处于打开状态时,单击“链接1”可以隐藏#section1。

相同的一致行为适用于带有#section2的“链接2”和带有#section3的“ Link3”

请参见animated gif of desired behavior

谁能帮我吗?

HTML:



<div id="navbar">
   <ul>
      <li><a href="#section1">Link 1</a></li>
      <li><a href="#section2">Link 2</a></li>
      <li><a href="#section3">Link 3</a></li>
   </ul>
</div>

<div class="container">
   <div id="section1"></div>
   <div id="section2"></div>
   <div id="section3"></div>
</div>

最佳答案

好,您需要完成3个任务:


更改内容部分
可点击的导航项
动画效果


让我们开始更改内容部分。我建议您将它们添加为.section之类。最简单的方法是使用display属性:

.section {display: none}
.section.active {display: block}


然后,您需要一些JS来使可导航项可点击:

$("#navbar").on("click", "a", function(e) {
    // cross browser href parsing
    var $tab = $("#" + e.currentTarget.href.split("#")[1]);
    // toggle one tab's visibility and close others if need
    $tab.toggleClass("active").siblings().removeClass("active");
    // prevent default
    return !1
})


最后一部分是动画效果。您需要使用CSS转换:

.section {transition: all 0.5s}


这是一个非常简单的示例-http://codepen.io/korzhik/pen/epwaEJ

顺便说一句,您可以使用CSS转换属性为“幻灯片”效果设置动画。它具有更好的性能。

07-24 15:59