显示 div 并转到主播

Question

你好

有没有办法让这段代码生效！我正在尝试显示 DIV (slidingDiv) 并转到选定的 ANCHOR (#anchor-01 + #anchor-02 + #anchor-03)... 这段代码让我只转到 DIV 中的第一行。那么请问，jump/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

$(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();
  });

});

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; }

<!-- 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>

Answer 2

通常您会在页内 link 的接收端使用 <a name="anchor-01">； div ID 不被视为 link 目标。但是，在这种情况下，由于单击 link 时您的目标是隐藏的，因此不会提供您想要的结果。

这会将页面显式滚动到 ID 与 link 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 传递给函数，然后您可以检查被点击的 link 的 ID，然后只需滚动到具有 class [=18= 的 div ]:

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

    var id = e.currentTarget.id;

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

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

});

显示 div 并转到主播

show a div and go to the anchor

html

javascript

anchor

jquery