如何使用href定位div加载

Question

我在使用href.in在load div中遇到问题我正在使用href链接并为相关链接更改div。但是我的div在页面顶部加载。我想在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 Library：

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