javascript - 跳转到被切换的 div

Question

目前的情况是这样的:一旦相应的链接被点击，下面的代码就可以切换一个 div。如果您再次单击该链接，它还会隐藏 div。

我想要这样做的是隐藏所有 div，除非您单击相应的 href 链接。当您单击此 href 链接时，它会显示正确的 div，然后隐藏其他的。它会自动“跳转”到切换的 div，类似于如果您在其中有一个 anchor 标记链接 href 链接和 div 的效果。

目前，当我点击链接时，它会显示 div，但我仍然必须向下滚动页面才能查看 div。它不会自动跳转到被切换的那个 div。当您单击当前链接进行查看时，它也不会隐藏其他 div。我尝试使用 slideToggle()，但我仍然需要向下滚动才能查看已切换的 div。

这是我所拥有的示例代码:

 <div class="row">
      <div class="large-12 columns">

         <a href="javascript:toggleByClass('content1')" class="link-list"> Content 1 </a>
         <a href="javascript:toggleByClass('content2')" class="link-list"> Content 2 </a>
         <a href="javascript:toggleByClass('content3')" class="link-list"> Content 3 </a>
  </div>
 </div>

 <div class="row">
    <div class="large-12 columns">

     <div class="content1" style="display: none;">
       <p> Information in Content 1</p>
     </div>
     <div class="content2" style="display: none;">
       <p> Information in Content 2</p>
     </div>
     <div class="content3" style="display: none;">
       <p> Information in Content 3</p>
     </div>
  </div>
 </div>

  <script type="text/javascript">

    function toggleByClass(className) {
     $("." + className).toggle();
}

 </script>

非常感谢任何方向建议。

• 在收到一个链接说这可能是一个可能重复的问题后 - 我想指出我并没有尝试添加 anchor 标记以跳转到页面上的内容。我想跳下一个页面以查看已经存在的切换 div，并隐藏其他未切换的 div。

Answer 1

要自动向下滚动到元素，请尝试将此行添加到您的 toggleByClass 函数中:

document.getElementsByClassName(className)[0].scrollIntoView();

参见 this page了解更多详情。

要隐藏其他元素，请尝试将此行添加到您的 toggleByClass 函数中:

$("." + className).siblings().hide();