Re0*_*ess 94 html javascript noscript
HTML中是否有标记只在启用JavaScript时才显示其内容？我知道<noscript>相反的方式,在JavaScript关闭时显示其HTML内容.但我想只在JavaScript可用的情况下在网站上显示一个表单,告诉他们为什么如果没有它就不能使用该表单.
我知道如何执行此操作的唯一方法是使用document.write();脚本标记中的方法,对于大量HTML来说,它似乎有点混乱.
Wil*_*ill 196
我能想到的最简单方法:
<html>
<head>
<noscript><style> .jsonly { display: none } </style></noscript>
</head>
<body>
<p class="jsonly">You are a JavaScript User!</p>
</body>
</html>
没有document.write,没有脚本,纯CSS.
首先,始终将内容,标记和行为分开!
现在,如果你正在使用jQuery库(你真的应该,它使JavaScript变得更容易),下面的代码应该做:
$(document).ready(function() {
$("body").addClass("js");
});
启用JS后,这将为您提供一个额外的类.现在,在CSS中,您可以在JS类不可用时隐藏该区域,并在JS可用时显示该区域.
或者,您可以将no-js默认类添加到body标签,并使用以下代码:
$(document).ready(function() {
$("body").removeClass("no-js");
$("body").addClass("js");
});
请记住,如果禁用CSS,它仍会显示.
我真的不同意这里关于预先嵌入HTML并用CSS隐藏它直到它再次用JS显示的所有答案.即使没有启用JavaScript,该节点仍然存在于DOM中.确实,大多数浏览器(甚至是可访问性浏览器)都会忽略它,但它仍然存在,并且可能会有奇怪的时间再次咬你.
我首选的方法是使用jQuery生成内容.如果它将是很多内容,那么你可以将它保存为HTML片段(只是你想要显示的HTML而没有html,body,head等标签)然后使用jQuery的ajax函数将其加载到整页.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$.get('_test.html', function(html) {
$('p:first').after(html);
});
});
</script>
</head>
<body>
<p>This is content at the top of the page.</p>
<p>This is content at the bottom of the page.</p>
</body>
</html>
<p>This is from an HTML fragment document</p>
<p>This is content at the top of the page.</p>
<p>This is from an HTML fragment document</p>
<p>This is content at the bottom of the page.</p>