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

【问题标题】：How to change CSS display property using an anchor tag?如何使用锚标记更改 CSS 显示属性？
【发布时间】：2015-07-09 15:39:24
【问题描述】：

我有一个页面，其中有一个锚标记：<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 的内容是隐藏的。当用户单击另一个页面中的超链接时，如何显示或淡入其内容？

【问题讨论】：

如果您正在寻找纯 CSS 解决方案：developer.mozilla.org/en-US/docs/Web/CSS/%3Atarget
@CBroe waw 我什至不知道它存在。酷。
你有没有尝试过？加载页面时可能从examining the hash 开始？
您可能需要使用一些 iFrame。
@Moojjoo 什么？不要建议iframes。如果我们能摆脱它们，世界将会变得更美好。

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：

你能告诉我更多我如何在上面的例子中真正使用。我对“哈希”一无所知。
哈希是 url 的一部分，在这种情况下代表一个元素。代码按原样工作。更多信息，谷歌location.hash MDN
谢谢先生。我能够做我想做的事。

【解决方案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>

【讨论】：

但这只有在我在同一页面中有锚标签时才有效。在这种情况下，锚标签位于不同的页面上。
好的，如果你的链接在不同的页面上，然后像你说的那样保持你的href：跳转到div2并在页面上tut.html 添加这个脚本： $(function () { var hash = window.location.hash; if(hash == '#div2') $(hash).fadeIn('slow'); });

【解决方案3】：

如果链接转到新页面：

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

在新页面“tut.html”的底部：

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

【讨论】：

假设你使用 jQuery 库。