CODEWITHSUNDEEP
javascriptjquery
Stu
Stu

Reputation: 1861

how do you change the color of a link once clicked, then change it back once another link is clicked?

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>

Upvotes: 0

Views: 1826

Answers (6)

David Kuridža
David Kuridža

Reputation: 7197

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');
});

Upvotes: 1

dleavitt
dleavitt

Reputation: 1392

You can do it like this:

$("#link1").click(function() {
    $(".links").removeClass("special-color");
    $("#link1").addClass("special-color");
    $("#Divb").show();
    $("#Divc").hide();
});

$("#link2").click(function() {
    $(".links").removeClass("special-color");
    $("#link2").addClass("special-color");
    $("#Divb").hide();
    $("#Divc").show();
});

And then add something like this to your css:

a.special-color {
    color: #FF5E99; /* hot pink */
}

Also, IDs in HTML can't have spaces in them, so you should change your div IDs to something without spaces.

Upvotes: 0

Pete Hamilton
Pete Hamilton

Reputation: 7900

I would suggest creating a css class for the active link e.g 'active' and then assigning it to the correct link using jquery, while disabling it on the other. e.g:

css:

.active{
/* Some distinguishing style here */
}

js:

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

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

Upvotes: 0

BradBrening
BradBrening

Reputation: 5518

You could try something like this:

<style type='text/css'>
  .highlighted { color: red; }
</style>
<script type='text/javascript'>
  $("#link1").click(function() {     
    $("#Div b").hide();
    $("Div c").show();
    $('.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted');  
  });      

  $("#link2").click(function() {
    $("#Div b").hide();
    $("#Div c").show();
    $('.highlighted').removeClass('highlighted');
    $(this).addClass('highlighted');  

  });
</script>

Upvotes: 0

ldiqual
ldiqual

Reputation: 15365

You could use:

$("#link1").css("color","yourcolor");

And then change it back when you call the other one.

Upvotes: 0

Gabriel
Gabriel

Reputation: 18780

The below solution relies on having ajax links. It will not work with standard links (meaning they do a round trip to the server and replace the page).

var i_color = '#FFOOOO';
var o_color = '#0000FF';

$('#div_a').delegate('.link', 'click', function(event){
  var $this = $(this);
  $this.css({color : i_color})
       .siblings()
       .css({ color : o_color })
})

To accomplish the feat in a static page environment you may wish to simply use the :active css pseudo selector like so.

// css file
.link:link {
  color : #0000FF;
}
.link:active {
  color : #FF0000;
}

Upvotes: 1

Related Questions