Utilizing AngularJS to Modify CSS Upon Clicking a Different Button

Question

Utilizing AngularJS to Modify CSS Upon Clicking a Different Button

I want to create a navigation menu with three buttons: "Home", "About", and "Contact". When the page loads, only the "Home" button will be active. Upon clicking the "About" button, it should become the only active button, while deactivating the rest. The same goes for the "Contact" button - once clicked, it becomes active while the other two are not.

By saying "active", I mean that the active button will have different CSS compared to the other two. My front-end JS framework of choice is AngularJS.https://i.sstatic.net/aUWSN.jpg

css angularjs

Answer 1

Answer №1

To get a better understanding of how to use the Angular ngClass directive, it's important to read through the documentation.

With the ngClass directive, you have the ability to assign a css class to a variable in your view.

If you define the page variable in your $scope.

JavaScript (within your angular controller)

$scope.page = 'home';

HTML

<li ng-class="{'active': page == 'home'}" ng-click="page = 'home'">Home</li>

CSS

<style type="text/css">
    .active {
        background: blue;
    }
</style>

Answer 2

To get a better understanding of how to use the Angular ngClass directive, it's important to read through the documentation.

With the ngClass directive, you have the ability to assign a css class to a variable in your view.

If you define the page variable in your $scope.

JavaScript (within your angular controller)

$scope.page = 'home';

HTML

<li ng-class="{'active': page == 'home'}" ng-click="page = 'home'">Home</li>

CSS

<style type="text/css">
    .active {
        background: blue;
    }
</style>

Answer 3

Answer №2

If you are utilizing ui-router, there is a directive known as ui-sref-active that will apply a custom class when a specific state is active.

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Check out this interactive jsfiddle demonstration to see how it functions. Specifically, take note of the student.profile state which adds an active class not only to itself but also to the student state.

Answer 4

If you are utilizing ui-router, there is a directive known as ui-sref-active that will apply a custom class when a specific state is active.

http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.directive:ui-sref-active

Check out this interactive jsfiddle demonstration to see how it functions. Specifically, take note of the student.profile state which adds an active class not only to itself but also to the student state.

Utilizing AngularJS to Modify CSS Upon Clicking a Different Button

Answer №1

Answer №2

Similar questions

Experiencing issues with content rendering in a Cordova iOS app when utilizing the CSS property -webkit-overflow-scrolling: touch

Creating dynamic grids in React.js by utilizing HTML

Different styles of Unicode arrowheads found on different versions of Android devices

How can a callback be created in an Angular directive using a function name stored in the parent scope variable?

Resolve the column alignment issue within the Twitter Bootstrap table

Switch the position of the tab from the left side of the page to the right side

Are CSS generated elements limited to text content only?

Having trouble selecting an option within an options wrapper using Python's Selenium?

Ensure that the height of the div element is equal to 100% of

What is the best way to emphasize a row in an Angular Material table based on a

The z-index property of the element is causing it to remain fixed and not

Hover events in the browser are currently operating at a sluggish pace

Modify the Primevue Class p-accordion-header only under certain conditions

Struggling with getting file upload functionality to function properly within an Angular UI modal window

Trouble with CSS animations in ThreeJS's CSS3DRenderer

Remove the right margin on the bootstrap container

Is there a way to apply a setTimeout to a <div> element upon the first click, but not on subsequent clicks?

Is there a way to track and observe the vertical movement of an element within a directive's link function?

The radio button element could not be located using the attribute "checked="Checked""

Unending cycle when integrating AngularJS with Laravel