CODEWITHSUNDEEP
htmlcssangularjs
shamila
shamila

Reputation: 1330

Change default CSS according to the clicked link

I have two links on my page and the views are changing according to it. The default view is the iPhone view and the other one is the tablet view. The link for the iPhone has the below CSS

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

and it appears like,

enter image description here

The HTML code is,

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

I want to give the same styling for the tablet link when it is clicked and remove the styling from the iPhone link, likewise change the style of the clicked link, but the default link style should be as it is when loading and should change when the user clicked the other link. I tried doing it but I could only do for hover over, the default style for the link does not appear in that way.

Upvotes: 1

Views: 101

Answers (1)

Icycool
Icycool

Reputation: 7179

You can use ng-class to achieve this.

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

Upvotes: 2

Related Questions