All geek questions in one place

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 completely hide the list if Javascript is disabled in the web browser.

I tried one solution that works, but uses the noscript element inside the head , which is not XHTML compliant. I am looking for a solution that matches XHTML.

+4
source share
4 answers

It will 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 ();
});
+7

, , 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>

+6

ul css, javascript .

, ul , javascript, my css.

jQuery Way:

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, ID <ul>, 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 Script

+2
source

You can add a "hidden" css id and then show only this object if javascript is enabled:

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";
};
0
source

Source: https://habr.com/ru/post/1524292/

More articles:


All Articles