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

debugcn 发表于 Dev

沙米拉

我的页面上有两个链接，视图根据它而变化。默认视图是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链接中删除该样式，同样更改单击链接的样式，但是默认链接样式应与加载时的样式相同，并且在更改链接时应更改用户单击了另一个链接。我尝试这样做，但是我只能将鼠标悬停在该链接上，链接的默认样式不会以这种方式出现。

冰冷

您可以使用它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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。