Question

我有一个列表，它是更大菜单的一部分：

<ul>
<li>Menu Item 1</li>
<li>Menu Item 2</li>
<li>Menu Item 3</li>
</ul>

如果在网络浏览器中禁用Javascript，我想完全隐藏列表。

我尝试了一种有效的解决方案，但它使用 head 中的 noscript 元素，该元素不符合XHTML。我正在寻找符合XHTML的解决方案。

Answer 1

这样可行

<div class="hidden">
  <ul>
    <li>Menu Item 1
    <li>Menu Item 2
    <li>Menu Item 3
  </ul>
</div>

.hidden {
  display: none;
}
$(function()
{
  $(".hidden").show();
});

Answer 2

你可能会更好地走另一条路，只有在启用了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>

Answer 3

您可以使用css隐藏ul，然后使用javascript来显示它。

这样，如果javascript被禁用，ul将不会显示，因为它隐藏了我的css。

jQuery方式：

<强> 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 Fiddle

普通Javascript方式：

如果你不想使用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";

Plain Javascript Fiddle

Answer 4

你可以添加一个“隐藏的”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";
};

如果禁用Javascript，则删除<div> </div>

4 个答案:

jQuery方式：

普通Javascript方式：