我有一个列表,它是更大菜单的一部分:
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
如果在网络浏览器中禁用Javascript,我想完全隐藏列表。
我尝试了一种有效的解决方案,但它使用 head 中的 noscript 元素,该元素不符合XHTML。我正在寻找符合XHTML的解决方案。
答案 0 :(得分:7)
这样可行
<div class="hidden"> <ul> <li>Menu Item 1 <li>Menu Item 2 <li>Menu Item 3 </ul> </div> .hidden { display: none; } $(function() { $(".hidden").show(); });
答案 1 :(得分:6)
你可能会更好地走另一条路,只有在启用了javascript时才显示它。
创建类似下面的类......
.JSenabled {display:none}
使用$(document).ready()
在$('.JSenabled').show()
上切换课程。
将此类添加到JS不可用时要隐藏的任何元素。
您还需要链接jQuery库。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
答案 2 :(得分:2)
您可以使用css隐藏ul,然后使用javascript来显示它。
这样,如果javascript被禁用,ul将不会显示,因为它隐藏了我的css。
<强> HTML:强>
<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
<强> CSS:强>
ul {
display: none;
}
<强> jQuery的:强>
$(document).ready(function() }
$('ul').show();
});
使用jQuery时,请记得将jQuery libery放在页面的<head>
部分:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
如果你不想使用jQuery,但是普通的javascript,你可以在你的<ul>
中添加一个ID,然后用这样的javascript显示:
<强> HTML:强>
<ul id="menu">
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>
<强> CSS:强>
ul {
display: none;
}
<强>使用Javascript:强>
document.getElementById('menu').style.display = "block";
答案 3 :(得分:0)
你可以添加一个“隐藏的”css id,然后只显示该对象,如果启用了javascript:
HTML:
<div class="hidden" id="hiddenDiv">
<ul>
<li>Menu Item 1
<li>Menu Item 2
<li>Menu Item 3
</ul>
</div>
CSS:
#hiddenDiv{
display: none;
}
的Javascript
window.onload = function() {
document.getElementById('hiddenDiv').style.display = "block";
};