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 file such as aa.css have being loading in head tag with respective div is shown and the same way on click on B and C. The main problem is once the Three .CSS file is being loaded it overwrite each other. Also i want to remove css file from head which has being loaded on click of any of above tab using jquery as shown below.

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

any idea will help me lot.

Thanks.

Answer 1

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.