删除 <div> 如果Javascript被禁用
[英]Removing <div> if Javascript is disabled
问题描述
I have a list that is part of a larger menu: 
我有一个列表，是一个更大的菜单的一部分：
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
I want to hide the list completely IF Javascript is disabled in the web browser. 我想完全隐藏列表如果在Web浏览器中禁用了Javascript。
I tried one solution that works, but it uses the noscript element within head , which is not compliant with XHTML. 我尝试了一个有效的解决方案，但是它使用head中的noscript元素，它不符合XHTML。 I'm seeking a solution that complies with XHTML. 我正在寻找符合XHTML的解决方案。
4 个解决方案
解决方案1
7 已采纳 2014-01-29 14:20:39
This would work 这会奏效
<div class="hidden">
<ul>
<li>Menu Item 1
<li>Menu Item 2
<li>Menu Item 3
</ul>
</div>
.hidden {
display: none;
}
$(function()
{
$(".hidden").show();
});
解决方案2
6 2014-01-29 14:20:20
You might be better going the other way and only displaying it if javascript is enabled. 你可能会更好地走另一条路，只有在启用了javascript时才显示它。
Create a class something like the below... 创建一个类似下面的类......
.JSenabled {display:none}
Toggle class on $(document).ready() using $('.JSenabled').show() . 使用$('.JSenabled').show()在$(document).ready()上切换类。
Add this class to any elements you want to hide when JS is unavailable. 将此类添加到JS不可用时要隐藏的任何元素。
You'll also need to link the jQuery library. 您还需要链接jQuery库。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
解决方案3
2 2014-01-29 14:29:45
You can hide the ul with css, and then use javascript to show it. 您可以使用css隐藏ul，然后使用javascript来显示它。
In this way, the ul will not show if the javascript is disabled, because it is hidden my the css. 这样，如果javascript被禁用，ul将不显示，因为它隐藏了我的css。
jQuery Way: jQuery方式：
HTML: HTML：
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
CSS: CSS：
ul {
display: none;
}
jQuery: jQuery的：
$(document).ready(function() }
$('ul').show();
});
When using jQuery, remember to put the jQuery libery in the <head> section of your pages: 使用jQuery时，请记住将jQuery libery放在页面的<head>部分：
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Plain Javascript Way: 简单的Javascript方式：
If you don't want to use jQuery, but plain javascript you can add an ID to your <ul> and then show it with javascript like this: 如果你不想使用jQuery，但是你可以在你的<ul>添加一个ID，然后用这样的javascript显示它：
HTML: HTML：
<ul id="menu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
CSS: CSS：
ul {
display: none;
}
Javascript: 使用Javascript：
document.getElementById('menu').style.display = "block";
解决方案4
0 2014-01-29 14:23:57
You can add a "hidden" css id and then only show that object if javascript if enabled: 你可以添加一个“隐藏的”css id，然后只显示该对象，如果启用了javascript：
HTML: HTML：
<div class="hidden" id="hiddenDiv">
<ul>
<li>Menu Item 1
<li>Menu Item 2
<li>Menu Item 3
</ul>
</div>
CSS: CSS：
#hiddenDiv{
display: none;
}
Javascript 使用Javascript
window.onload = function() {
document.getElementById('hiddenDiv').style.display = "block";
};
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.