CSS file removal

Question

I use spring MVC with a jsp page for presentation, I have three tabs: A, B and C on the same jsp page. By clicking on the “A” tab, a css file will appear, such as aa.css, which is loaded into the header tag with the corresponding div, and the same way when you click on B and C. The main problem is this: Three . The CSS file loads, it overwrites each other. I also want to remove the css file from head , which loads when you click any of the above tabs using jquery , as shown below.

$("#A").click(function(){ alert("Remove bb and cc.css file form head tag"); }); 

any idea will help me a lot.

Thanks.

Answer 1

Give the id tag the <link> .

 <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. . Although the HTML standard does not have a disabled attribute, the HTMLLinkElement DOM object has a disabled attribute.

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

• If the disabled attribute was added directly to the element on the page, do not include the <link> element in it;
• Set the disabled property of the DOM object using scripts.

Answer 2

You can unload 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 3

You simply specify the id link tag or class (say id = "deleteMe"), then delete it as shown 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 should write your jQuery as follows:

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