Question

你好

有没有办法让这段代码有效！我试图显示DIV（slidingDiv）并转到选定的ANCHOR（＃anchor-01 +＃anchor-02 +＃anchor-03）... 这段代码让我只去了DIV的第一行。那么请问，如何跳跃/ scrool到确切的锚点？感谢

<html>
<head>
<title>Test show hide tab</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".slidingDiv").hide();
    $(".show_hide").show();
    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle();
    });
    });
    </script>

    <style type="text/css">
        .slidingDiv {
        background-color: #99CCFF;
        padding:20px;
        margin-top:10px;
        border-bottom:5px solid #3399FF;
        }
        .show_hide {
        display:none;
        }
    </style>
</head>
<body>

<a href="#anchor-01" class="show_hide">Show/hide 01</a> -- <a href="#anchor-02" class="show_hide">Show/hide 02 </a> -- <a href="#anchor-03" class="show_hide">Show/hide 03</a>
<hr>

<div class="slidingDiv">

    <div id="anchor-01">
        <h2>Tite for link anchor  01</h2>
        Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
        <br><br><br><br><br><br><br><br><br><br><br>
    </div>

    <div id="anchor-02">
        <h2>Tite for link anchor  02</h2>
        Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
        <br><br><br><br><br><br><br><br><br><br><br>
    </div>

    <div id="anchor-03">
        <h2>Tite for link anchor  03</h2>
        Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
        <br><br><br><br><br><br><br><br><br><br><br>
    </div>
</div>

</body>
</html>

Answer 1

＆＃13;

$(document).ready(function(){

  var $divs = $(".slidingDiv").children();
  
  $divs.hide(); /* HIDE CHILDREN INSTEAD */
  
  $('.show_hide').click(function(){
    var id = this.hash;
    $divs.not(id).stop().slideUp();
    $(id).slideToggle();
  });

});

＆＃13;

html, body{height:100%; margin:0; font:16px/20px sans-serif;}

/* ALL YOU NEED to get started */
.slidingDiv       { background-color: #99CCFF; }
.slidingDiv > div { padding:20px; }

＆＃13;

<!-- Add #anchor-NN to the HREF of the children elements buttons too!!! -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#anchor-01" class="show_hide">Show/hide 01</a> --
<a href="#anchor-02" class="show_hide">Show/hide 02 </a> --
<a href="#anchor-03" class="show_hide">Show/hide 03</a> <hr>

<div class="slidingDiv">

  <div id="anchor-01">
    <h2>1 Tite for link anchor  01</h2>
    1 Fill this space with really interesting content. <a href="#anchor-01" class="show_hide">hide</a>
    <br><br><br>
  </div>

  <div id="anchor-02">
    <h2>2 Tite for link anchor  02</h2>
    2 Fill this space with really interesting content. <a href="#anchor-02" class="show_hide">hide</a>
    <br><br><br>
  </div>

  <div id="anchor-03">
    <h2>3 Tite for link anchor  03</h2>
    3 Fill this space with really interesting content. <a href="#anchor-03" class="show_hide">hide</a>
    <br><br><br>
  </div>

</div>

＆＃13;

Answer 2

通常你会在页面内链接的接收端使用<a name="anchor-01">; div ID不被视为链接目标。但是，在这种情况下，由于在单击链接时隐藏了目标，因此无法获得所需的结果。

这会明确地将页面滚动到ID与链接href：

匹配的div

$(document).ready(function() {
      $(".slidingDiv").hide();
      $('.show_hide').click(function() {
        $(".slidingDiv").slideToggle();

        var target = $($(this).attr("href"));
        if (target.length) {
          $('html, body').animate({
            scrollTop: target.offset().top
          }, 300);
        }
      });
    });

.slidingDiv {
  background-color: #99CCFF;
  padding: 20px;
  margin-top: 10px;
  border-bottom: 5px solid #3399FF;
}
.show_hide {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a href="#anchor-01" class="show_hide">Show/hide 01</a> -- <a href="#anchor-02" class="show_hide">Show/hide 02 </a> -- <a href="#anchor-03" class="show_hide">Show/hide 03</a>
<hr>

<div class="slidingDiv">

  <div id="anchor-01">
    <h2>Tite for link anchor  01</h2>
    Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <div id="anchor-02">
    <h2>Tite for link anchor  02</h2>
    Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>

  <div id="anchor-03">
    <h2>Tite for link anchor  03</h2>
    Fill this space with really interesting content. <a href="#" class="show_hide">hide</a>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</div>

Answer 3

你走了。

https://jsfiddle.net/6zg19ap0/

您需要将e传递给该函数，然后您可以检查所单击链接的ID，然后滚动到具有“div + id”类的div：

$('.show_hide').click(function(e){

    var id = e.currentTarget.id;

    $(".slidingDiv").slideToggle();

    $('html,body').animate({
        scrollTop: $("#div"+id).offset().top},
    'slow');

});

显示一个div并转到锚点

3 个答案: