突出顯示angularjs中單擊的超鏈接

Question

以下是我的HTML代碼，

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

我想突出顯示所選的超鏈接，我在Internet上嘗試了許多方法，但是幾乎所有方法都與超鏈接的URL鏈接。 請幫忙。 在將鼠標懸停在鏈接上時，我已經成功使用懸停來突出顯示，但是我仍然停留在突出顯示單擊的鏈接上。

Answer 1

您可以嘗試如下操作：

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

Answer 2

如果您說您的代碼沒有url路徑，那么我假設所有這些都需要在同一視圖和同一控制器內發生。 在這種情況下，您可以在范圍內放置一個變量，例如selectedLink ，並使用ng-class來應用適當的樣式：

<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

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

在您的控制器中

$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 = ''
  }
}

為selectedLink添加CSS

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

如果使用此方法，則可以覆蓋瀏覽器的Active偽類