如何使用href查找div负载

Question

我在使用href.in加载div时遇到问题，在这里我使用href链接并将div更改为相关链接。但是我的divs在页面顶部加载。我想在200px高度后加载它。

<a href="#1">1</a>
<a href="#2">2</a>
<a href="#3">3</a> 
<div id="1">test1</div>
<div id="2">test2</div>
<div id="2">test3</div>

代码结构是这样的。

Answer 1

您需要使用JQuery .click（）和.attr（）方法获取单击的锚标记的href 。 然后，您将需要通过id获取html，并使用JQuery方法.html（）更改所需容器的HTML 。

HTML：

<a href="#1"><span id="1">A</span></a>
<a href="#2"><span id="2">B</span></a>
<a href="#3"><span id="3">C</span></a>
<a href="#4"><span id="4">D</span></a>
<br><br><br>
<div id="changed">Click on Links to see text here</div>

JQUERY：

$(document).ready(function(){
    $('a').click(function(){
        var href = $(this).attr('href')
      $("#changed").html( $(href).html() );
      return false;
    });
});

演示： http ： //jsfiddle.net/a3Ln0x6v/

像这样的JQuery函数之前，请不要忘记在您的网页中包含JQuery库 ：

    <script src="https://code.jquery.com/jquery-2.2.1.js"></script>
    <script>
    $(document).ready(function(){
        .......
    });
   </script>

Answer 2

您是否要使用锚点/书签？

您可以在目标内容的上方放置一个div：

<div id="1"></div>
<div class="content">test1</div>

如果是这样，您可以使用一些css来偏移锚点div：

#1 {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

与顶部一起玩：-250px; 直到获得所需的偏移量。 所结果的

<a href="#1">Click to move to position 1</a>

应该以所需的垂直偏移移到下面的内容。

////

或使用jQuery（为简单的滚动偏移量而过分杀伤，但添加了漂亮的动画）：

var offset = $('#1').offset();
var scrollto = offset.top - 60; // adjust 60 to desired height
$('html, body').animate({scrollTop:scrollto}, 0);