CODEWITHSUNDEEP
jqueryhtmlcss
aF.
aF.

Reputation: 66697

Change selected link color using CSS?

I've defined a class (item1) for a set of objects.

Is it possible to put red text color the object (from the class) that I click/select and put all the other objects (from the class) in black text color?

Here's is the code where I apply the class (item1):

        <td>
            <a class="item1" href="/menu2" onclick="">
            Menu1
            </a>
        </td>

        <td>
            <a class="item1" href="/menu2" onclick="">
            Menu2
            </a>
        </td>

How can I do this in the css file?

Upvotes: 4

Views: 20254

Answers (4)

Alexandre Wiechers Vaz
Alexandre Wiechers Vaz

Reputation: 1617

Here's the fiddle!

And here's the code:

HTML

<td>
            <a class="item1" href="#">
            Menu1
            </a>
        </td>

        <td>
            <a class="item1" href="#">
            Menu2
            </a>
        </td>

JS

$('.item1').click(function(e){
    $('.item1').css("color", "black");
    $(this).css("color", "red");
});

Upvotes: 6

korogui
korogui

Reputation: 203

If you're using ajax, or loading your content in another frame, the best is using javascript (jquery):

$('a').each(function(){
   $(this).click(function(){
      $('a').removeClass('selected');
      $(this).addClass('selected');
   })
});

in your style:

a, a:hover, a:visited, a:active{
   color:black;
}
a.selected{
   color: red;
}

Upvotes: 2

Kristian
Kristian

Reputation: 21820

Is it possible to put red text color the object (from the class) that I click/select

OK some of the terms you're using need a bit of clarity:

  • On click in css is called :active
  • On hover in css is called :hover
  • After click in css is called :visited when talking about an a tag.

If you mean to actually set a link to an "active" state, you may have "symptoms" of that with the :visited selector, but it is by no means the way to do that.

the real way to do that is to physically add a class to your element that will identify it as active, i.e. <a class="active"> and style that particular class accordingly (typically done with a sprinkling of javascript)

So, using javascript how do you add / remove that class?

Using javascript, you listen to click events. every time something is clicked, you do the following:

  1. remove the existing active class from whatever element currently holds it.
  2. add it to the item being clicked.

Upvotes: 6

Wez
Wez

Reputation: 10712

You might be looking for :visited

a:visited {

color:red;

}

Upvotes: 4

Related Questions