Tab with link and mouesover effect

I like the user experience offered by 01net. There is a contextual text which changes when the mouse goes over titles positionned in tabs, and the tabs titles are links to a more detailed page.

I’ve done the tab widget with clickable links with jQuery (live demo). I have slightly extended the original jQuery UI tabs by BKlaus Hartl.

First you need to include the jQuery library.

Then set up a the tabs widget.

By default, the content of the tab panel is changed when you click on the tab. I want to change this behaviour, and select a tab with the mouseover event instead. Jquery provides an option for this:

[javascript]

$(‘#tabs’).tabs( {

event: ‘mouseover’

});

[/javascript]

Now comes the hard part. I want to change the event handler triggered when clicking a tab. As the documentation might suggest, I tried to set the select event handler.

However, it turns out that a tab is now « clicked » when the mouse rolls hover, because of the event I have changed before. The jQuery documentation should say that select is « The event which is triggered, as defined by the event option (or, by default, when the link in the tab title is clicked) »

So I have decided to overide the click event on the link. To do this, I have added a class attribute to my links. Instead of

[html]

• One [/html]

I have now

[html]

• One [/html]

As you can see, I have decided to rely on the « rel » attribute to define the real link, and this looks rather appropriate.

And of course, I have defined some Javascript to handle the click:

[javascript]

$(‘.clickable-tab’).click(function(){

document.location=this.rel;

return false; });

[/javascript]

Edit: to improve the user experience, discret-incognito advised me to set the pointer to cursor for the links on tab titles. This is done in one line of CSS

[css]

.clickable-tab {

cursor: pointer;

/* cursor: hand; — add this for IE 5. I don’t care */

}

[/css]

But because, this is overridden by jQuery-UI, it doesn’t work ‘or just a fraction of second). I actually have to overload jQuery:

[javascript]

$(« .clickable-tab »).css(« cursor », »pointer »);

[/javascript]

Thanks for reading, enjoy the live demo of tabs widget. Hope this helps!