CODEWITHSUNDEEP
javascripthtmlcssangularjs
shamila
shamila

Reputation: 1330

Highlight clicked hyperlink in angularjs

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.

Upvotes: 2

Views: 1548

Answers (3)

Syam Pillai
Syam Pillai

Reputation: 5217

 <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

Upvotes: 1

Kobi Cohen
Kobi Cohen

Reputation: 678

You can try something like this: 

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

Upvotes: 1

fikkatra
fikkatra

Reputation: 5792

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

Upvotes: 1

Related Questions