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

我想突出选中的超链接，我在网上试过很多方法，但几乎都是用超链接的URL链接。请帮忙。当鼠标悬停在链接上时，我已经成功地使用悬停来突出显示，但我坚持突出显示单击的链接。

Answer 1

如果您说您的代码没有 url 路径，我假设所有这些都需要在同一个 View 和同一个 Controller 中发生。在这种情况下，您可以在作用域上放置一个变量，例如 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; }