Is there a way to adjust the background color of the clicked tab with divs and revert the others back to their original color?

Question

Is there a way to adjust the background color of the clicked tab with divs and revert the others back to their original color?

<span class="row top-bar-left align-items-center" style="width: 80%; float:left">
        <div tabindex="1" class="link tab" routerLink="details" routerLinkActive="active"
            [queryParams]="activatedRoute.queryParams | async">
            <p>JDA-WMS Details</p>
        </div>
        <div tabindex="2" class="link tab" routerLink="summary" routerLinkActive="active"
            [queryParams]="activatedRoute.queryParams | async">
            <p>JDA-WMS Summary</p>
        </div>
        <div tabindex="3" class="link tab" routerLink="shortage" routerLinkActive="active"
            [queryParams]="activatedRoute.queryParams | async">
            <p>Shortage</p>
        </div>
    </span>

Using the above code, I am implementing three DIVs as tabs. Upon clicking one of them, the background color should change. Subsequently, clicking another tab should trigger a color change and reset the initial tab's background color to its original state.

html css angular

Answer 1

Answer №1

Utilizing routerLinkActive successfully applies the "active" CSS class to the current tab. To customize this further, a bit of CSS adjustment is all that's required.

.tab.active {
    background-color: blue;
}

Answer 2

Utilizing routerLinkActive successfully applies the "active" CSS class to the current tab. To customize this further, a bit of CSS adjustment is all that's required.

.tab.active {
    background-color: blue;
}

Answer 3

Answer №2

If you want to achieve the desired functionality using jQuery, you can do so with just a few lines of code:

$('.tab').click(function() {
$('.tab').removeClass('active');
$(this).addClass('active');
});

.tab {
height:100px;width:100px;background:gray;margin:25px;cursor:pointer;
}

.tab.active {
background:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>

Answer 4

If you want to achieve the desired functionality using jQuery, you can do so with just a few lines of code:

$('.tab').click(function() {
$('.tab').removeClass('active');
$(this).addClass('active');
});

.tab {
height:100px;width:100px;background:gray;margin:25px;cursor:pointer;
}

.tab.active {
background:red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="tab">1</div>
<div class="tab">2</div>
<div class="tab">3</div>

Is there a way to adjust the background color of the clicked tab with divs and revert the others back to their original color?

Answer №1

Answer №2

Similar questions

What is the best approach to retrieve a JSON object from a form exception that has a specific name?

The datepicker feature mysteriously vanishes when using Safari browser

Spooky 'outline' emerges with rounded corners in Internet Explorer 11 and Microsoft Edge

Get rid of the drop-down shadow effect

Tips for converting file byte code to file form data

Implement endless scrolling to JSON dataset in an ionic-3 application

The problem with -webkit-center in HTML

CSS resetting can lead to tables appearing misaligned

Are browser window.sessionStorage and ng libraries like ngx-webstorage considered safe to implement in Angular 4?

What is the best way to eliminate the curved border and inset box shadow from the Material UI TextField component in React?

Authenticate through Twitter when using PhoneGap Cordova

Ensuring Proper Alignment of Headers in CSS

Using TypeScript to call a class method from within another function

Injecting arbitrary text following ?= in a web URL

Removing Bootstrap Styles in Angular Single Page Applications

Ways to implement a conditional statement to display a div using JavaScript

Trouble filling a List<WebElement> from a Table using Selenium Java

Update the background color on the sidebar

Designing a unique CSS border for custom list item bullets

Is it possible to set the radius of a d3.js circle using a style attribute?