jQuery UI tabs: how to make different tabs styles per one site?

Question

jQuery UI tabs is a wonderful instrument. But as I see it has the same style on all pages through one site.

But I wont to change it style from page to page. I think it is possible to do adding extra classes to jQuery code. But I do not know how to do that.

I need on one page tabs have border (I mean border over tabs headers and it's content, as default) and on another not.

Could anyone help me implement it?

Thanks!

Please read this post: http://stackoverflow.com/questions/2685614/load-external-css-file-like-scripts-in-jquery-which-is-compatible-in-ie-also — SoftwareARM, Nov 30 '11 at 13:46
Please read this post: http://stackoverflow.com/questions/2685614/load-external-css-file-like-scripts-in-jquery-which-is-compatible-in-ie-also — SoftwareARM, Nov 30 '11 at 13:47

score 3 · Accepted Answer · edited Jan 27 '12 at 19:01

3

You can add a class to your tabs wrapper and style it in the CSS.

<div id="tabs" class="about-page">
<div id="tabs" class="contact-page">

CSS

#tabs.about-page {
   border: 1px solid red;
}

#tabs.contact-page {
   color: blue;
   font-size: 14px;
}

...and so on.

In your script tag, you should still call it like this:

$(function() {
    $( "#tabs" ).tabs();
});

edited Jan 27 '12 at 19:01

KatieK

answered Nov 30 '11 at 13:37

peduarte

1 Answers1