Caught exception: cannot call methods on tabs before initialization

Question

I use the following code to change the tab color when clicked

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

but he gives an error

uncaught exception: cannot call methods on tabs before initialization; tried to call the '> .pane' method, can someone help me with this, what is this error?

Answer 1

Its quite straightforward, as the exception says. Before you can work with them, your initializations must be initialized. Therefore, initialize them.

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

or just using

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

Answer 2

I do not know what you expect from using this code, but it is wrong. You should not pass a selector as an attribute for the .tabs() method. Take a look at the jQuery user interface APIs to use.

Answer 3

Your initialization is incorrect. Part of the argument ("> .pane") attempts to call a method in the tabs namespace, which certainly does not exist.

You also initialize the tabs method to a div containing the list (ul), not ul itself.

Assuming html structure:

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

Something like that:

 $('#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'); }); 

Learn more about jqueryui.com/tabs