Question

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 when 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

Answer 1

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;`
}