I am using the following code to change the tab color on click

  $("ul.tabs").tabs("> .pane");

but it is throwing the error

uncaught exception: cannot call methods on tabs prior to initialization; attempted to call method '> .pane'

Could somebody help me with this what is this error?

I am using the following code to change the tab color on click

  $("ul.tabs").tabs("> .pane");

but it is throwing the error

uncaught exception: cannot call methods on tabs prior to initialization; attempted to call method '> .pane'

Could somebody help me with this what is this error?

• javascript
• jquery

• 1 why you think it will help you to set colors ? – zb' Commented Dec 11, 2012 at 12:28
• what tab system (plugin) are you using? – charlietfl Commented Dec 11, 2012 at 12:28

3 Answers 3

Its pretty straight forward as the exception says. Your tabs must be initialized before you can work on them. So initialize them.

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

or simply by using

$("ul.tabs").tabs().tabs($("div.panes > div"), action);

I don't know what do you expect to get using this code, but it's wrong. You shouldn't pass selector as an attribute for .tabs() method. Look at the jQuery UI Tabs API for how to use it.

Your initialization is invalid. The ("> .pane") argument part is trying to call a method in the tabs namespace, which certainly does not exist.

Also you initialize tabs method on the div containing the list (ul), not the ul itself.

Assuming html-structure:

<div id="tabs">
  <ul>
    // the list items
  </ul>
    // tab content divs (all with class="pane")
</div>

Something like this:

$('#tabs').tabs();
$('#tabs li').bind('click', function() {
   // change bg color to 'teal' of all divs with class name '.pane' inside #tabs div
   $('#tabs').find('.pane').css('background-color', 'teal');
});

Read more on jqueryui.com/tabs