Question

我的网页上有一个带有id=divid的div标签和一个href的值为#divid.

的锚标记

我的href链接出现在div标签之前，我把它写成：

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

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

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

当我删除display :none时，它可以正常工作，但完全没有。很抱歉标签结构不清楚，因为此处未显示字符串后跟开始标记，因此我删除了它们。

Answer 1

您需要整合一些JavaScript＆amp; CSS为此。步骤将是：

您的CSS必须隐藏您想隐藏的DIV

在锚点的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>

Answer 2

你可以用简单的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;
}

Answer 3

如果你的div id显示：none 而不是写作你可以写这个

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

如果您不使用jQuery，只需使用document.getElementById即可使用

在页面加载时隐藏带有锚名称的div，并仅在单击链接时显示它

3 个答案: