Highlight clicked hyperlink in angularjs

Question

Below is my HTML code,

<div id="Navigation" class="md-dialog-full">
      <div class="products-options">
           <a ng-click='addType("Physical")' href="javascript:void(0);">
               <h1>Physical</h1>
               <label>An item that is shipped to your customers</label>
           </a>
           <a ng-click='addType("Digital")' href="javascript:void(0);">
               <h1>Digital</h1>
               <label>Content that is downloaded</label>
           </a>
           <a ng-click='addType("Service")' href="javascript:void(0);">
               <h1>Services</h1>
               <label>Provide a Service</label>
           </a>
      </div>
</div>

I want to highlight the selected hyperlink, I have tried many methods in internet but almost all are linked with the URL of the hyperlink. Please help. I have succeed in using hover to highlight when hovering over a link but I'm stuck in highlighting the clicked link.

similar to this http://stackoverflow.com/questions/12592472/how-to-highlight-a-current-menu-item and check this http://codepen.io/SkiWether/pen/lzjAq — Pardeep Pathania, Apr 19 '16 at 11:47

Kobi Cohen · Answer 1 · 2016-04-19T11:55:44.977

1

You can try something like this:

<a ng-click='addType("Physical"); visited = true' ng-class="{'visited' : visited}" href="javascript:void(0);"></a>

edited Apr 19 '16 at 11:55

answered Apr 19 '16 at 11:48

Kobi Cohen

678
4
9

I have already used it, but :visited psuedo class is not working for me. This does not redirect to anywhere. – shamila Apr 19 '16 at 11:50

score 1 · Accepted Answer · answered Apr 19 '16 at 11:54

If you say your code does not have url paths, I'm assuming that all of this needs to happen within the same view and the same controller. In that case, you can put a variable on the scope, say selectedLink, and use ng-class to apply the proper styling:

<div id="Navigation" class="md-dialog-full">
    <div class="products-options">
        <a ng-click='addType("Physical");selectedLink = "Physical"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Physical'}">
            <h1>Physical</h1>
            <label>An item that is shipped to your customers</label>
        </a>
        <a ng-click='addType("Digital");selectedLink = "Digital"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Digital'}">
            <h1>Digital</h1>
            <label>Content that is downloaded</label>
        </a>
        <a ng-click='addType("Service");selectedLink = "Service"' href="javascript:void(0);" ng-class="{'selected': selectedLink === 'Service'}">
            <h1>Services</h1>
            <label>Provide a Service</label>
        </a>
    </div>
</div>

css:

.selected { color: yellow; }

score 1 · Answer 3 · edited Jul 10 '17 at 03:43

 <div id="Navigation" class="md-dialog-full">
     <div class="products-options">
         <a ng-click='addType("Physical")' href="javascript:void(0);" class="{selectedPhysical}">
             <h1>Physical</h1>
             <label>An item that is shipped to your customers</label>
         </a>
         <a ng-click='addType("Digital")' href="javascript:void(0);" class="{selectedDigital}">
             <h1>Digital</h1>
             <label>Content that is downloaded</label>
         </a>
         <a ng-click='addType("Service")' href="javascript:void(0);" class="{selectedService}">
             <h1>Services</h1>
             <label>Provide a Service</label>
         </a>
    </div>
</div>

in your controller

$scope.addType = function(type){
  if(type == 'Physical'){
   $scope.selectedPhysical = 'selectedLink'
   $scope.selectedDigital = ''
   $scope.selectedService = ''
   }
  else if(type == 'Digital'){
    $scope.selectedDigital = 'selectedLink'
    $scope.selectedService = ''
    $scope.selectedPhysical = ''
  }
  else{
    $scope.selectedService = 'selectedLink'
    $scope.selectedDigital = ''
    $scope.selectedPhysical = ''
  }
}

add css for selectedLink

.selectedLink{
  color : Blue;
  font-size: 1.2em;
  //whatever the changes you want to made for the active link text
 }

If you are using this you can overwrite the browser Active pseudo class

Highlight clicked hyperlink in angularjs

3 Answers3