Removing the CSS file

Question

I am using spring MVC with jsp page for presentation, i have three tab suppose A,B and C in one jsp page. While clicking on A tab the css f

Answer 1

You can unload a css by disabling it as follows:

$("#A").click(function(){
    $("link[href*=bb.css]").attr("disabled", "disabled");
    $("link[href*=cc.css]").attr("disabled", "disabled");
    $("link[href*=aa.css]").removeAttr("disabled");
});

Answer 2

You just give that link tag an id or a class (say id="deleteMe") then remove it like below:

$('head').find('link#deleteMe').remove();  

So in your case add id to each file when you link them like this:

<link id="aa" rel="stylesheet" href="First.css" type="text/css" />  
<link id="bb" rel="stylesheet" href="Second.css" type="text/css" />  
<link id="bb" rel="stylesheet" href="Third.css" type="text/css" />

Now to remove only Second.css, Third.css you have to write your jQuery like this:

(function ($) {  
    $('head').find('link#aa').remove();  
    $('head').find('link#bb').remove();  
})(jQuery);

Answer 3

I had to disable css files without being able to specify an id, so to remove the following css file:

<link rel="stylesheet" type="text/css" href="http://localhost:8092/bootstrap/css/bootstrap.min.css" disabled="disabled">

I added this script

<script type="text/javascript">
  $(document).ready(function() {
    $('link[href*="bootstrap.min.css"]').attr("disabled", "true");
  }
</script>

Answer 4

Give an id to the <link> tag.

<link rel="stylesheet" href="style1.css" id="style1" />
<link rel="stylesheet" href="style2.css" id="style2" />

And use this code:

$("#A").click(function(){
    $("#style1").attr("disabled", "disabled");
});

Note: While there is no disabled attribute in the HTML standard, there is a disabled attribute on the HTMLLinkElement DOM object.

The use of disabled as an HTML attribute is non-standard and only used by some Microsoft browsers. Do not use it. To achieve a similar effect, use one of the following techniques:

• If the disabled attribute has been added directly to the element on the page, do not include the <link> element instead;
• Set the disabled property of the DOM object via scripting.