Question

目前的情况是：下面的代码用于在单击相应的链接后切换div。如果再次单击该链接，它也会隐藏div。

我想要这样做是隐藏所有div，除非你点击相应的href链接。当您单击此href链接时，它会显示正确的div，然后隐藏其他div。并且它会自动“跳转”到切换的div，类似于在链接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并显示它，同时隐藏其他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()
})

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

跳转到切换的div

3 个答案: