根据点击的链接更改默认CSS

Question

我的页面上有两个链接，视图正在根据它进行更改。默认视图是iPhone视图，另一个是平板电脑视图。 iPhone的链接具有以下CSS

.current-device{
    border: 1px solid #999;
}

看起来好像，

HTML代码是，

<p>Mobile App</p>
                <a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
                <a class="tablet-icon" href ng-click="tabletView=true" ></a>

 <div class="mobile-preview" ng-class="tabletView ? 'tabletView' : '!tabletView'" >
            <div class="mobile-wrapper" >
                <div class="mobile-simulator" overflow="scroll">
                    <me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
                    <me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}" ></me-tablet>
                </div>
            </div>
        </div>

我想在点击时为平板电脑链接提供相同的样式，并从iPhone链接中删除样式，同样更改单击链接的样式，但默认链接样式应该与加载时一样，并且应该当用户点击其他链接时更改。我试过这样做，但我只能将鼠标悬停在上面，链接的默认样式不会以这种方式出现。

Answer 1

您可以使用ng-class来实现此目标。

<a class="mobile-icon" href ng-click="tabletView=false" ng-class="{'current-device': !tabletView}"></a>
<a class="tablet-icon" href ng-click="tabletView=true" ng-class="{'current-device': tabletView}"></a>