0

我的页面有一个 div 标签id=divid和一个锚标签，其href值#divid.

我的 href 链接出现在 div 标签之前，我将其写为：

<a href=#divid>go to div</a>

因此，当单击链接时，它应该滚动以显示提到的 div。但问题是我希望 div 在页面加载时不可见，而是在单击链接时它必须可见，但它没有这样做。

我把它写成：<div id="divid" style="display:none;">bla bla</div>

当我删除display :none它时，它可以正常工作，但根本不行。抱歉，标签结构不清楚，因为此处未显示字符串后跟起始标签，因此我将其删除。

4

3 回答 3

3

你可以用简单的 CSS 做到这一点：

HTML

<a href="#a">a</a>

<div id="a" class="page"> this is a id content...</div>

CSS

#a{
 display:none;
}

#a:target{
 display:block;
}
于 2013-11-11T07:06:23.780 回答
3

为此，您需要集成一些 JavaScript 和 CSS。步骤将是：

  1. 你的 CSS 必须隐藏你想要隐藏的 DIV

  2. 在锚点的 onClick 中，清除隐藏 DIV 的类：

    <body>
    <a href="#myhiddensection" onClick="document.getElementById('myhiddensection').style.display='block';">Go there!</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div>Nothing below to see at load!</div>
    <div id="myhiddensection" style="display: none">Hello there!</div>
</body>

请注意，上面的示例使用的是纯 JS。如果您要使用 jQuery 之类的东西，它可能会更干净，如下所示，您不必担心奇怪的跨浏览器怪癖：

<body>
    <a href="#myhiddensection" onClick="$('#myhiddensection').show();">Go there!</a>
    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    <div>Nothing below to see at load!</div>
    <div id="myhiddensection" style="display: none">Hello there!</div>
</body>
于 2013-11-11T08:15:11.400 回答
0

如果你的 div id display:none 而不是写你可以写这个

 <a onclick="scrolltodiv();"></a>
 <script>
 function scrolltodiv(){
     var topPosition = $('#divid').scrollTop().top;
     $(window).scrollTop(topPosition);
 }
 </script>

如果您不使用 jQuery，只需使用 document.getElementById 就可以了

于 2013-11-11T07:18:05.610 回答