removing no-js class in html tag with jquery
Looking at one jquery project I have find this line:
var Application=function(c){
$("html:first").removeClass("no-js");
}
Would like to understand this lin开发者_StackOverflow中文版e, and what is his purpose?
This line of jQuery removes a class of no-js from the html tag. The no-js class was probably set in the HTML. The point of this is to tell CSS whether or not JS is enabled.
For example, I might have a <div> that I want to fade in when the user clicks on a button. At first, the div needs to be hidden, so I might do this in CSS:
#theDiv {
display: none;
}
Then I use this jQuery when they click on the button:
$('#theDiv').fadeIn()
But now we have a problem. If the user has JS enabled, everything works good. But if they don't have JS enabled, then the box stays hidden and never appears. By adding the following CSS, we show the box if JS is turned off:
.no-js #theDiv {
display: block;
}
Then we add a class to the html tag:
<html class="no-js">
Now if JS is turned on, JS removes the class no-js and the box stays hidden until JS fades it in. If JS is turned off, the box is always shown.
Hope that helps!
That is for Javascript degradability.
For instance, say you have something on a page that is hidden, and then becomes visible when someone clicks something with JS. If a visitor came to the site with JS turned off, there would be no easy way to see the hidden content.
To get around this, you can set up special CSS that only runs when JS is turned off, by having a 'no-js' class at the root of the page and the removing the class on pages that have JS running.
.hidden {
display: none;
}
.no-js .hidden {
display: block;
}
加载中,请稍侯......
精彩评论