I have three paragraphs which are made to look like three seperate buttons:
<p id="showCloud" class="newRefreshThree" name="tabbed"><span class="ico"></span><a href="">{i18n key="evadmin.title.cloud"}</a></p>
{if $enableCapacityReport=="1"}
<p id="showStats" name="tabbed"><span class="ico"></span><a href="" >{i18n key="evadmin.stats.showstats"}</a></p>
{/if}
<p id="showInfrastructure" name="tabbed" class="newRefreshFour"><span class="ico"></span><a href="">{i18n key="evadmin.title.infrastructure"}</a></p>
All of them share the same name, name = tabbed
Each of these paragraphs/buttons send a user to a seperate tab and I would like to highlight the button of whichever tab is selected, while making sure all the other types are then un-highlighted.
Just now I wrote what I thought was the first part of the JQuery I need:
$('p[name=tabbed]').click(function(){
$(this).css('background-color','red');
});
but obviously this doesn't deselect the other p's, and I didn't know the most efficient/nicest way of doing it..
Also I would like to have an initial button/p highlighted when the page orignally loads so that it starts off highlighted for that tab.
Could anyone recommend to me what event/method I can use to do everything I just stated, or even give an example? Regards