And*_*rko 44 html jquery hidden
我想生成具有可以有条件地显示/隐藏的区域(div,spans)的html布局.默认情况下隐藏这些区域.
如果我在document.ready上使用jquery调用.hide()方法,这些区域可能会闪烁(浏览器呈现部分加载的文档).所以我在html布局中应用"display:none"样式.
我想知道避免眨眼的最佳做法是什么,因为应用"display:none"打破了封装规则 - 我知道jquery用hide/show做什么并使用它.如果jquery的隐藏/显示实现有一天会改变,我会让整个网站变得不可行.
先感谢您
Mar*_*rko 33
@安德鲁,
我知道答案已经被接受,但使用display: none;将是一个恶梦没有JavaScript的用户.
使用内联Javascript,您可以隐藏元素,而不会闪烁.没有Javascript的用户仍然可以看到它.
考虑一些在页面加载时应该隐藏的div.
<head>
<script type="text/javascript" src="jQuery.js"></script>
</head>
<body>
<div id="hide-me">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me").hide();
</script>
<div id="hide-me-too">
... some content ...
</div>
<script type="text/javascript">
$("#hide-me-too").hide();
</script>
</body>
该联JavaScript将尽快元素呈现运行,从而从用户隐藏它.
我同意BorisGuéry的观点,即它不是过度工程,而是标准的最佳实践.我会采用与Boris稍微不同的方式,首先在html中添加一个no-js类,然后用JavaScript删除它.
这样您就不会等待文档准备好隐藏内容,而且没有任何JavaScript,您仍然可以看到内容.假设用户没有JavaScript更符合渐进增强的理念.
例如:
<html class="no-js">
<body>
<div id="foo"></div>
</body>
</html>
我的css:
#foo {
display: none;
}
html.no-js #foo {
display: block;
}
和javascript
$(document).ready(
function()
{
$('html').removeClass('no-js');
}
);
*********或每个案例***********
例如:
<div class="no-js" id="foo">foobar and stuff</div>
CSS:
.no-js {
display:none;
}
#foo {
display: block;
}
#foo.no-js {
display: none;
}
JS:
$(document).ready(function(){
// remove the class from any element that has it.
$('.no-js').removeClass('no-js');
});
设置元素的初始显示属性绝对没有任何问题，特别是如果将其封装在 css 类中。