How to emphasize a clicked hyperlink in AngularJS

Question

How to emphasize a clicked hyperlink in AngularJS

Here's the HTML code I've been working on:

<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've been trying to find a way to highlight the clicked hyperlink, but most methods I found online are related to the URL of the link. Can anyone help me with this? I managed to use hover to highlight links when hovering over them, but I'm struggling with highlighting the link that has been clicked.

javascript html css angularjs

Answer 1

Answer №1

In the scenario where your code does not contain URL paths, it can be assumed that everything should take place within the same view and controller. To achieve this, you can set a variable on the scope such as selectedLink, and utilize ng-class to apply the appropriate 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; }

Answer 2

In the scenario where your code does not contain URL paths, it can be assumed that everything should take place within the same view and controller. To achieve this, you can set a variable on the scope such as selectedLink, and utilize ng-class to apply the appropriate 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; }

Answer 3

Answer №2

Here's a suggestion you can experiment with:

<a ng-click='setType("Digital"); checked = true' ng-class="{'checked' : checked}" href="javascript:void(0);"></a>

Answer 4

Here's a suggestion you can experiment with:

<a ng-click='setType("Digital"); checked = true' ng-class="{'checked' : checked}" href="javascript:void(0);"></a>

Answer 5

Answer №3

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

inside the 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 = ''
  }
}

apply CSS for selectedLink

.selectedLink{
  color : Blue;
  font-size: 1.2em;
  //custom changes for active link text
 }

If being used, it can override the browser's Active pseudo class

Answer 6

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

inside the 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 = ''
  }
}

apply CSS for selectedLink

.selectedLink{
  color : Blue;
  font-size: 1.2em;
  //custom changes for active link text
 }

If being used, it can override the browser's Active pseudo class

How to emphasize a clicked hyperlink in AngularJS

Answer №1

Answer №2

Answer №3

Similar questions

Having issues with jQuery's .hover and .mouseleave functions causing unintentional looping. Any suggestions on how to resolve this

Gone Without a Trace: Where Did the WP Admin

What is the best way to utilize XMLHttpRequest for sending POST requests to multiple pages simultaneously?

What is the best way to store multiple forms in a single request using React?

Exploring the concept of type identification in interpreted dynamic languages

What is the best approach to transition a monolithic MEAN stack application to a Microservices architecture?

Ways to determine if an AngularJS modal is currently displayed

Getting a portion of a href link in Java using Selenium

Revolutionary Knockout-Kendo MultiSelect Feature: Pressing Enter Erases Previously Selected Options

The video on mobile is not loading properly, as the play button appears crossed out

Tips for setting up Greasemonkey to automatically click on an unusual link on a particular website

Navigating the json return values within an angular.js action success callback can be achieved through the following

Exploring the AngularJS global Date timezone offset

Reduce the combined character value of the title and excerpt by trimming the excess characters

Sending properties of an element to a function within Angular version 4 or 5

Is there a way to store image URLs in a fashionable manner?

Opting out of accents in the Vue filter and utilizing the table filter feature provided by Bootstrap-Vue

Splitting the div into two columns

Authenticating with Objective-C

Improving an unspecified JavaScript function