How to change texts colors in my case

Question

I have bunch of links and I need to change the texts color to red after user clicks them

I have something like:

<li class="test" ng-repeat="item in items">
  <a href="" ng-click="clickMe()" class="test-li">
    {{item.name}}
  </a>
</li>

Currently the style is like

.test-li {
  color: black;
}

I want my texts to turn red after user clicks them.

So I do:

.test-li:visited {
    color:red;
}

It works when I click the item, but the color changes back to black after I click another item. I feel like this can be archive simply in CSS without setting ng-class. Can anyone help me about it? Thanks a lot!

test-li is already a class refer to the a tag. – GeekSquard Apr 07 '15 at 21:44 — GeekSquard, Apr 07 '15 at 21:44

score 2 · Accepted Answer · answered Apr 07 '15 at 21:30

You don't have any destination url given in your links, so there really isn't a way for the browser to know which links have been visited. I think if you were to add a simple #test, #test1, #test2, etc to your href attribute in your links, you would find that your CSS does work as intended.

score 1 · Answer 2 · answered Apr 07 '15 at 22:10

Since your link doesn't actually go anywhere, you'd be better off adding a 'visited' class to your <a> element when clicked, via JS.

jQuery exmample:

$('li a').click(function(){
  $(this).addClass('visited');
  // or you could use $(this).toggleClass('visited'); depending on what you want to achieve.
});

How to change texts colors in my case

2 Answers2