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

时间:2014-01-29 14:15:08

标签: javascript css xhtml

我有一个列表,它是更大菜单的一部分:

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

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

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

4 个答案:

答案 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。

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

答案 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";
};