Question

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

Answer 1

If you’re not going to be dynamically adding <p> elements to the page, then you can cache the selector, use that to manipulate all of the paragraphs, then finally apply your style to the element that was clicked on.

var $p = $('p[name="tabbed"]');
$p.click(function(e) {
    $p.css('background-color', '');
    $(this).css('background-color', 'red');
});

Or, use a CSS class declaration, and use the removeClass() and addClass() functions to add/remove that class as appropriate:

CSS
.red {
background-color: red;
}

jQuery:

var $p = $('p[name="tabbed"]');
$p.click(function(e) {
    $p.removeClass('red');
    $(this).addClass('red');
});