Question

I am using Ruby on Rails 3.0.9, jQuery 1.6.2 and jQuery UI. I am trying to implement nested tabs by following the official documentation.

When I state the following (that is the “normal”\”common” way as stated in the documentation source code)

<div id="tabs">
  <ul>
    <li>...</li>
  </ul>
</div>

<script>
  $(function() {
    $( "#tabs" ).tabs();
  });
</script>

and then I go to display the HTML code generated, jQuery UI automatically add the following CSS class properties to the <div id="tabs">:

<div class="ui-tabs ui-widget ui-widget-content ui-corner-all" id="tabs">
  ...
</div>

Is it possible to prevent adding some of those CSS classes? If so, how to do that?

Answer 1

You can always $("#tabs").removeClass("whatever") if you want, but you’ll likely lose certain functionality if you do. The real question is why do you want to do this?