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>

我想突出显示所选的超链接，我在互联网上尝试了很多方法，但几乎所有方法都与超链接的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
 }

如果您使用此功能，则可以覆盖浏览器有效伪类

突出显示angularjs中单击的超链接

3 个答案: