Html 根据单击的链接更改默认CSS

我的页面上有两个链接，视图也随之改变。默认视图是iPhone视图，另一个是tablet视图。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>

移动应用程序

---

我希望在单击tablet链接时为其提供相同的样式，并从iPhone链接中删除样式，同样更改单击链接的样式，但默认链接样式应与加载时相同，并应在用户单击其他链接时更改。我尝试过这样做，但我只能对“悬停”进行操作，链接的默认样式不会以这种方式显示。

您可以使用

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>