How to make a selected link active

Question

I can get to show a selected link, but when I click somewhere in the page, the highlight disappears. I'm also struggling to get the highlight to edges like the hover.

I've attached a piece of code and a picture for reference.

#sidebarContent a :ACTIVE, #sidebarContent a:FOCUS{
        background-color: Green;
        padding: 5px 10px; 
        /* margin-left:auto;
        margin-right:auto; */
        text-decoration: none;
        width: 120px;           
    }

You'll have to attach a class to your links; `:focus` and `:active` only persist so long as you are interacting with that element (like `:hover`). — gyre, Feb 24 '17 at 09:02
As I see that this is tagged with jQuery, I would suggest you to chek out this: http://stackoverflow.com/questions/7738219/how-to-keep-active-css-style-after-clicking-an-element. When it comes to the highlight to edges-part, I think we might need some elaboration — Coss, Feb 24 '17 at 09:05
@Anant I can't see your answer anymore. Do you have any idea why? — eldix_, Feb 24 '17 at 12:39

score 2 · Accepted Answer · edited Feb 24 '17 at 11:24

2

If you use angular application (you added this tag) - you can use active class to mark your current route instead of using ::focus pseudo class.

  <a href="#/home" ng-class="{active: isActive('home')}">Home</a>
  <a href="#/about" ng-class="{active: isActive('about')}">About</a>

where:

$scope.isActive = function(path) {
    return $location.path() == '/' + path;
}

Please check this fiddle https://jsfiddle.net/vadimb/2waujx3m/

edited Feb 24 '17 at 11:24

Anant Kumar Singh

68,309
10
50
94

answered Feb 24 '17 at 09:14

VadimB

5,010
2
29
44

if he is really using `angular-ui-bootstrap` then this is more good example. BTW +1 for jsfiddle link – Anant Kumar Singh Feb 24 '17 at 11:27

How to make a selected link active

1 Answers1