显示一个div并转到锚

有没有什么办法让这个代码的工作！我试图显示DIV（slidingDiv）并转到选定的锚（＃anchor-01 +＃anchor-02 +＃anchor-03）... 此代码让我只能进入DIV中的第一行。那么请你怎么跳到确切的锚？感谢

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

来源

2016-05-31 TaghaBoy

所以你说你想让这三个内容随时可见，只需要滚动父级？咦？ –

在这里你去。

https://jsfiddle.net/6zg19ap0/

您需要电子传递到功能，那么您可以检查被点击链接的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'); 

});

来源

2016-05-31 18:30:23 user3683675

我非常喜欢你的代码和想法，非常感谢你的快速启发。 – TaghaBoy

这个小提琴演示似乎不起作用。它显示并同时隐藏所有div。（在Chrome中测试） –

这就是它的意思，它应该显示全部，然后动画滚动到选定的div。 – user3683675

$(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>

来源

2016-05-31 17:17:08

感谢您的回答，代码工作完美，但它只显示目标div和我，我希望访问者通过鼠标滚动查看其他div ......但您的想法我将在其他项目中使用它。谢谢 – TaghaBoy

这应该被标记为正确的答案。 –

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

这明确地滚动页面到div与ID匹配的链接的href：

$(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>

来源

2016-05-31 17:28:24

感谢你的答复@ daniel-beck，你的代码工作，因为我需要它。再次感谢 – TaghaBoy

显示一个div并转到锚

回答

相关问题