跳到被切换的 div

Question

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

我想要做的是隐藏所有 div，除非你点击相应的 a href 链接。当您单击此 href 链接时，它会显示正确的 div，然后隐藏其他 div。它会自动“跳转”到切换的 div，类似于如果您在那里有一个锚标记链接 a 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>

非常感谢任何有关方向的建议。

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

Answer 1

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

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

更多详情请见this page。

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

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

Answer 2

我对您的方法进行了一些更改，我认为可以解决问题。它利用锚标签跳转到正确的 div 并在隐藏其他的同时显示它。

$(document).ready(function(){
	$(".collapse-link").click(function(){
        var idToCollapse = $(this).attr("href");
        $(".collapse-div").not(idToCollapse).hide();
        $(idToCollapse).toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
      <div class="large-12 columns">
         <a href="#content1" class="collapse-link"> Content 1 </a>
         <a href="#content2" class="collapse-link"> Content 2 </a>
         <a href="#content3" class="collapse-link"> Content 3 </a>
      </div>
 </div>

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

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

Answer 3

修改为：

<a href="#content1"  id="atag1" class="link-list"> Content 1 </a>
<div id="content1" class="content1" style="display: none;">

和

$('#atag1').on("click", function(){
     $('.content1').toggle()
})

这可以扩展到剩下的两个。