Question

我有一个页面，其中有一个锚标记：<a href="tut.html#div2">jump to div2</a>。

这个锚标记会打开tut.html，其中div带有id=div2：

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
            <div id="div1">
                --some content--
            </div>
            <div id="div2" style="display:none;">
                --some content--
            </div>
        </div>
    </div>
 </div>

默认情况下，隐藏div2的内容。当用户点击另一个页面中的超链接时，如何显示或淡入其内容？

Answer 1

您可以轻松检查传入的hash并使用它来显示相应的块：

window.onload = function(){
    var element = document.querySelector(location.hash);
    if(element) element.style.display = "block";
}

Answer 2

你的href链接不应链接到页面，只能链接到锚点：

<a class="myButton" href="#div2">link</a>
<div class="container">
   <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
           <div id="div1">
              --some content--
           </div>
           <div id="div2" style="display:none;">
              --some content--
           </div>
      </div>
  </div>
</div>

使用jQuery，你应该在文档底部有一个函数来处理你的点击：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">   </script>
<script>
    $(function () {
        $('a.myButton').on('click', function(event){
          event.preventDefault();
          $('div2').fadeIn('slow');
          return false;
        })
    });
</script>

Answer 3

如果链接转到新页面：

<a href="tut.html#div2">link</a>

在新页面的底部＆＃39; tut.html＆＃39; ：

<script>
  $(function () {
    var hash = window.location.hash;
    if(hash == '#div2') $(hash).fadeIn('slow');
  });
</script>

如何使用锚标记更改CSS显示属性？

3 个答案: