Question

I have two links inside a div called div A. when link 1 is clicked a div with some info is shown (div B) and when the link 2 is clicked a different div(div C) is shown. This is done using jquery’s show/hide.

I would like the color of the selected link to change and then return only once the other link is clicked. therefore highlighting which link the user is currently viewing.

Does anyone know how I go about achieving this link color change through Jquery or even PHP. Thank you. All help is greatly appreciated.

Javascript

    $("#link1").click(function() {
    $("#Div b").hide();
    $("Div c").show();
    });

    $("#link2").click(function() {
    $("#Div b").hide();
    $("#Div c").show();
    });

HTML

<div id="div a">
<a href="javascript:void(0);" class="links" id="link1"></a>
<a href="javascript:void(0);" class="links" id="link2"></a>
</div>

Answer 1

You need to use CSS, either directly

$("#link1").click(function() 
{
    $("#Div b").hide();
    $("Div c").show();
    $(this).css('color', '#f00');
});

$("#link2").click(function() 
{
    $("#Div b").hide();
    $("#Div c").show();
    $(this).css('color', '#00f');
});

or by defining it in CSS

a.class1
{
    color: #f00;
}

a.class2
{
    color: #00f;
}

and then using it like this:

$("#link1").click(function() 
{
    $("#Div b").hide();
    $("Div c").show();
    $(this).toggleClass('class1');
});

$("#link2").click(function() 
{
    $("#Div b").hide();
    $("#Div c").show();
    $(this).toggleClass('class2');
});