Can I remove the entire style of jQuery UI tabs without breaking the styles of other UI components? [closed]

Question

I want to fully customize jQuery UI tabs without breaking the styles of jQuery UI date picker? Is that doable or should I do a custom work and not use jQuery UI tabs?

Antitrades

It's possible, but I think it's easier to code your own tabs. Take a look at this link: #2459723 – Azotize

Answer 1

$("#mytabs").tabs()

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="mytabs">
   <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
     <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
      <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
   <div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="tabs-1">
      <p>Tab one content goes here.</p>
   </div>
    ...
</div>

this example show most of the ui classes that may be applied.. you can reset them for children of e.g. #mytab only..

#mytab.ui-tabs {
    /* reset or overwrite everything you don't like */
}

#mytab li.ui-tabs-selected {
    /* reset or overwrite everything you don't like */
}

...

This is not exactly comfortable but allows you to still use say the jquery ui styles in any other element.

about the datepicker, as long you make sure the styles defined above are not used in the divs that hold the content you should be fine, most of the classes are prefixed with ".ui-datepicker-" or ".ui-tabs-" anyway so they should't interfere..

Secundines

I was trying to avoid this, but I eventually done it this way. Only, I got my tabs wrapped in a div with a class, so I can reuse my styles on other tab components on the page. – Antitrades

Answer 2

Just use jQuery chaining to remove the ui-widget class from the tab container element after applying the tabs widget. Most of the undesirable styling is attached to the ui-widget class.

$("#tabs").tabs().removeClass('ui-widget');

In a different case with more heavily styled content, I found that removing more classes was necessary, not just from the container div, but from all elements inside it.

$("#tabs").tabs();
$("#tabs, #tabs *")
.removeClass('ui-widget ui-widget-content ui-widget-header ui-tabs-panel');

Cedell

Answer 3

Perhaps this minimally-intrusive css skeleton helps. Observe that only JQuery UI's defined ui-tabs class (and its descendent ul > li) is styled, which avoids touching other ui-related classes contained in theme-roller-generated jquery-ui-1.8.18x.custom.css (I never quite got this idea by merely studying that file).

            /* default tab state */                
                /* tabs nav bar */
                .ui-tabs ul {
                    border-top: 0 !important; 
                    ...
                }                
                .ui-tabs li { 
                        background :  #EFEFE7 !important; 
                        ...
                } 
                .ui-tabs li a  { 
                        color:          Black !important;
                        padding:        4px 1.5ex 3px !important; 
                    }                    
            /* selected tab state */
                .ui-tabs li.ui-state-active { 
                        margin: 0;
                        ...
                    }
                .ui-tabs li.ui-state-active a  { 
                        ...
                    } 
            /* hovered tab state */
                .ui-tabs li.ui-state-hover { 
                    ...
                    }                    
                .ui-tabs li.ui-state-hover a { 
                    ...
                    } 

Estradiol

Answer 4

Stumbled upon similar problem. Solution and demo listed below.

I would like to thank following source that provided me with good example for the CSS code - http://keith-wood.name/uitabs.html

Also, I would like to thank jquery team and their example code from here - http://jqueryui.com/tabs/

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>

CSS

#tabs { 
    background: transparent; 
    border: none; 
} 
#tabs .ui-widget-header { 
    background: transparent; 
    border: none; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    border-radius: 0px; 
}
#tabs .ui-tabs-panel {
    display: none;
    background: transparent;
    border-width: 0px;
    background: none;
}
#tabs .ui-tabs-nav .ui-state-default { 
    background: transparent; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-active { 
    background: transparent no-repeat bottom center; 
    border: none; 
} 
#tabs .ui-tabs-nav .ui-state-default a { 
    color: #c0c0c0; 
} 
#tabs .ui-tabs-nav .ui-state-active a { 
    color: #459e00; 
}

JS

// Setting Tabs - Demonstrating how to set currently selected tab
$("#tabs").tabs({active: 1});
$("#tabs").removeClass('ui-widget');

// Demonstrating how to get index of currently selected tab
var active = $("#tabs").tabs( "option", "active" );
console.log(active);

DEMO

Phiphenomenon

Answer 5

The shortest way if you really want "just" the tab functionality seems to be:

RDIY "rather do it yourself"

jsFiddle demonstration (using little-altered jQuery's example): https://jsfiddle.net/uy986516/

Because if you don't need jQuery styling, what do you actually need? Not much...

jQuery( function($){
  var $myCoolTabsWrap = $('.myCoolTabsWrap');
  if( $myCoolTabsWrap.length > 0 ){
    $myCoolTabsWrap.find('> ul a').not('.realLink').click(function(e){
        e.preventDefault();
        var $me = $(this);

        $myCoolTabsWrap.find('.active').removeClass('active');
        $me.parent().add( $me.attr('href') ).addClass('active');
    });
  }
});

Leaving you with only this functional CSS:

.myCoolTabsWrap > ul li{ display: inline-block; }
.myCoolTabsWrap > div{ display: none; }
.myCoolTabsWrap > div.active{ display: block; }

HTML syntax is the same with additional features:
1. Panels with content are hidden by default, pre-choosing must be done for tab&panel manually by giving them "active" class (but that is often wanted...). User-choosing tabs&panels and "active" class them-giving is done automatically.
2. Tab is an actual link? - no problem - just give its link "realLink" class.

<div id="tabs" class="myCoolTabsWrap">
  <ul>
    <li><a href="#tabs-1" class="active">Tab 1 link text</a></li>
    <li><a href="#tabs-2">Tab 2 link text</a></li>
    <li><a href="#tabs-3">Tab 3 link text</a></li>
    <li><a href="https://google.cz/" target="_blank" class="realLink">An actual link text</a></li>
  </ul>
  <div id="tabs-1" class="active">
    Some of your cool html / text.
  </div>
  <div id="tabs-2">
    Some of your cool html / text.
  </div>
  <div id="tabs-3">
    Some of your cool html / text.
  </div>
</div>

Stratopause

Answer 6

It probably won't be doable due to cross-widget dependencies.

However, just make use of the cascading nature of CSS. Include the reference to the jQuery UI CSS, then include a reference to your own which will override the jQuery UI styles.

Cost

Answer 7

I know this is an old question but as it's #1 on Google for "jquery ui tabs no style" here is my fix:

      // Remove the annoying jQuery UI classes when we create the tabs.
      $('#tabs').tabs().removeClass (function (index, className) {
        return (className.match (/(^|\s)ui-\S+/g) || []).join(' ');
      });

Biting