Question

I’m using jQuery to create a load of tabs for a web application. I’ve used just the basic examples provided from here without any luck so far. The tab content works, the theme displays correctly, however when I click on a tab the state of the tab doesn’t changed. This application has to work under IE7, any other browser doesn’t matter whatsoever (I may just add that I’m not an IE7 user, I’m an avid Firefox user)

<div class='ui-tabs ui-widget ui-widget-content ui-corner-all' id='tabs'> <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'><span>Nunc tincidunt</span></a></li>   <li class='ui-state-default ui-corner-top'><a href='#tabs-2'><span>Proin dolor</span></a></li> </ul> <div class='ui-tabs-panel ui-widget-content ui-corner-bottom' id='tabs-1'>   <p>Tab one content goes here.</p> </div> <div class='ui-tabs-panel ui-widget-content ui-corner-bottom' id='tabs-2'>   <p>Tab1 one content goes here.</p> </div> 

Following this is the CSS provided by jQuery’s ThemeRoller so my includes look like the following:

<link href='/intranet/common/stylesheets/jquery-ui/ui.all.css' rel='stylesheet' type='text/css' /> <script src='/intranet/common/javascript/jquery-1.2.6.min.js' type='text/javascript'></script> <script src='/intranet/common/javascript/jquery-ui.js' type='text/javascript'></script> 

I’m then enabling the tabs using the following:

<script type='text/javascript'>   $(document).ready(function() {     $('#tabs > ul').tabs();   }); </script> 

As I say, the tab content works, everything is themed, but once I ‘click’ on a tab, the state of the tab doesn’t change to being the active one. The ThemeRoller works in IE7, but my page doesn’t. I have no idea where I’m going wrong, and I’ve played around with it for a couple of hours at least trying to get it working.

Any ideas?

Answer 1

Consider upgrading to the latest version of jQuery (1.3). I’ve tested your code with an old css (flora) for 1.2.6 and it works. With the ThemeRoller I’ve just downloaded it doesn’t work neither for Firefox or IE.

Also try using the latest version of jquery-ui. The safest bet is to try the javascript files and the css files and images directly from the ThemeRoller download.