how to create custom jquery tabs?

i have this specific scenario:

i have 4 tabs and each tab has it's own 2 icons for when it's selected or not.

what i want to do is for the icon to change 开发者_如何学Gowhen i click the tab and change to another icon when i click another tab.

p.s. i am talking about the tabs itself and not about the content of the containers.

thanks

check this image: http://answers.oreilly.com/index.php?app=core&module=attach&section=attach&attach_rel_module=post&attach_id=621

Assuming each tab has their own css class, you could use background-image in CSS for each of the pictures in the tabs.

Then, when the tab is selected (which you could then add a class saying it's selected like "selected" or something) and then give a different image

For example:

.book_tab{
background-image:url('img_plane.png');
background-repeat:no-repeat;`
}
.rent_tab{
background-image:url('img_car.png');
background-repeat:no-repeat;`
}
.deals_tab{
background-image:url('img_tag.png');
background-repeat:no-repeat;`
}
.book_tab .selected{
background-image:url('img_plane2.png');
background-repeat:no-repeat;`
}
.rent_tab .selected{
background-image:url('img_car2.png');
background-repeat:no-repeat;`
}
.deals_tab .selected{
background-image:url('img_tag2.png');
background-repeat:no-repeat;`
}

If you are using ui tabs a selected class is applied to the active tab. If you're not I'm sure that you can apply it yourself. All you need to do then is provide the images as the background in css.