在CSS3中，您实际上可以利用:only-child选择器隐藏内容，直到页面加载为止。 Here is a demonstration of how to do this。基本思想是CSS在加载时会向DOM添加一个节点，同时加载该节点及其子节点。此外，一旦第二个子节点被添加到给定的父节点，:only-child选择器规则就被打破了。我们匹配此选择器并设置display: none以隐藏给定的节点。
<!doctype html>
<html>
<head>
<title>Hide content until loaded with CSS</title>
<style type="text/css" media="screen">
.hide-single-child > :only-child {
display: none;
}
</style>
</head>
<body>
<div class='hide-single-child'>
<div>
<h1>Content Hidden</h1>
<script>
alert('Note that content is hidden until you click "Ok".');
</script>
</div>
<div></div>
</div>
</body>
</html>
#toggleMe //Keep this in your .css file
{
display:none;
visibility:inherit;
background-color:#d2d8c9;
}
<a href="#" onclick="return false;">Expand Me</a>
///this way u can make a link to act like a button too
<div id="toggleMe"> //this will be hidden during the page load
//your elements
</div>
///if you decide to make it display on a click, follow below:
<script type="text/javascript" src="jquery.js"> </script> //make sure u include jquery.js file in ur project
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
$('#toggleMe').toggle("slow"); //Animation effect
});
});
</script>
///Now for every alternate click, it shows and hides, but during page load; its hidden.
//Hope this helps you guys ...
8条答案
按热度按时间goqiplq21#
在CSS3中，您实际上可以利用
:only-child选择器隐藏内容，直到页面加载为止。Here is a demonstration of how to do this。基本思想是CSS在加载时会向DOM添加一个节点，同时加载该节点及其子节点。此外，一旦第二个子节点被添加到给定的父节点，
:only-child选择器规则就被打破了。我们匹配此选择器并设置display: none以隐藏给定的节点。jucafojl2#
在CSS中：
或者在HTML中：
zvms9eto3#
j7dteeu84#
在页面上加载javascript函数的最佳方法是
就你而言
vlf7wbxs5#
在html代码的最顶端添加以下样式。
并在大多数HTML代码的末尾添加以下脚本。
不要忘记在div元素中添加
class="extraControls"。您也可以使用
id代替class。对于ID，将
div.extraControls替换为div#extraControls，将$('div.extraControls')替换为$('div#extraControls')如果浏览器上禁用Javascript，请使用以下脚本强制启用Javascript。
在GC上检测
2g32fytz6#
你可以做的是在文档的末尾插入一个内嵌的
script标签，或者直接在id为“extraControls”的div后面插入。当然，你也可以在服务器端这样做，但也许你有一个很好的理由不想这样做（比如，如果浏览器不支持javascript，让控件可见）。
gt0wga4j7#
bksxznpy8#
创建一个css类
把这个添加到任何你不想在加载页面时显示的元素中，然后使用
$("div#extraControls").show();再次显示它。