tab heading text not clickable
hi guys, im just playing around with jquery and jquery UI to get a
feel for things.
ive managed to get some lovely jquery ui tabs on a page, and they look
and work as expected apart from one problem - the text of the tab
headings dont do anything when clicked, and to change between tabs you
have to actually click on the parts without text. I'm not quite sure
why this is happening, and its happening both on FF3 and Opera 9.6
(running on ubuntu if it matters).
Here's the code I've got, which I'm pretty sure is correct.
In the html:
<div id="tabSection">
<!--This defines the tab listing-->
<ul>
<li><a href="#tabOne"></a>First Tab</li>
<li><a href="#tabTwo"></a>Second Tab</li>
<li><a href="#tabThree"></a>Third Tab</li>
</ul>
<!--The tabs themselves-->
<div id="tabOne">
This is the first tab.
</div>
<div id="tabTwo">
This is the second tab.
</div>
<div id="tabThree">
This is the third tab.
</div>
</div>
And in an external .js that runs when $(document).ready(), ive got:
$("#tabSection").tabs();
So I get tabs, but unlike the demo on the jQuery UI page, when you
move the mouse over the tab label's text, it turns to a selector for
the text, and doesn't let you click to change it while mousing over
the text. Does that make sense?
Hopefully someone will know what I'm talking about.
(on an unrelated note, the themeroller in Opera9.6 has positioning
display issues)