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.

htmlcssangular

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

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

embed a hyperlink onto a live video at a designated moment within an HTML document

Can anyone help me figure out how to overlay a link over a video playing at a specific time on an HTML page? I know it's easy to do on Youtube, but I need to accomplish this task without using Youtube. :) Thank you in advance for any assistance! ...

javascripthtmlcssvideo

Stylish CSS menu design

I am struggling to set up a top menu bar using float: left. How can I achieve the desired behavior for a top menu bar? The code snippet below demonstrates what I have tried so far: * { margin:0; padding: 0; } #menu { background-color: yell ...

cssuser-interfacemenu

Incorporating JSON data into an HTML table

Looking to populate an HTML table with JSON data, but struggling with parsing and appending the data correctly. Can anyone provide guidance or assistance? <!DOCTYPE html> <html> <head> <title>JSON Demo</title> < ...

javascripthtmljson

Redirecting on the server side in Angular 2

I am currently studying Angular 2 and attempting to develop an application using Angular with Spring. In a traditional J2EE MVC application, the client sends a request, the server processes it, and then redirects to another page. The decision to redirect ...

angularspring-mvcangular2-routing

I am working with two dropdown menus and I need to search the database for data that matches both selections. Unfortunately, the code I have written does not seem to be functioning correctly

I am facing an issue with a dropdown filter in my PHP code. I have 3 pages and the dropdown is working for one filter, but I am unable to make it work for both filters simultaneously. I suspect it's a syntax error since I am new to PHP. I have tried v ...

phphtmlmysql

Incorrect form of SphereGeometry detected in three.js

I'm having trouble rendering a simple sphere in three.js because it's appearing distorted (looking more like a vertical stick). Below is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

javascripthtmlthree.js

Secret button concealed within a div, revealing only a helpful hint

On my website, there is a list of items where each item is represented by either a picture or a name enclosed in an <article> tag. Here is an example of how it looks: <article class="client-card"> <p><img width="211" height="106" ...

htmlcssstylesheet

jQuery unable to target Bootstrap button

I've been experiencing some trouble trying to attach a listener to a button I made with Bootstrap. <button type="button" id="buttonone" class="btn btn-default btn-lg good"> <span class="glyphicon glyphicon-minus" aria-hidden="true">< ...

javascriptjqueryhtmlcsstwitter-bootstrap

Transitioning to EM-Based Media Queries

After the recent resolution of the WebKit page-zoom bug, what are the primary benefits of utilizing em-based media queries over pixel-based ones? Incentive I am offering a reward for my question as many prominent CSS frameworks and web developers use em- ...

cssresponsive-designmedia-queries

Some elements are not visible when inspecting the source code

Hidden fields are essential in my jsp form. Interestingly, when I check the page source in a browser, only the first hidden field is displayed, not the second one. <input type="hidden" name="url" id="url" value="<%=url%>" /> <input type="hi ...

javahtmljsp

Achieving the perfect vertical alignment of navigation buttons alongside a responsive image

Is there a way to ensure that the button always vertically aligns in the middle of the image responsively? I've managed to make the image responsive using .img-responsive, but I'm having trouble keeping the arrow centered on the image at all time ...

htmlcsstwitter-bootstrap-3

Is it possible to run Angular2 and Expressjs on separate ports?

I have set up my Angular2 application to use Expressjs as the backend. Both projects are structured within the same directory: /index.html <-- Angular index file /app.js <-- Expressjs /package.json /Gruntfile.js /bin <-- Expressjs bin ...

expressangular

Utilizing Backward and Forward Navigation with AJAX, JavaScript, and Window.History

TARGET Implement Ajax for fetching pages Utilize JavaScript to update the window URL Leverage Window History to preserve Ajax page for seamless forward-backward navigation without reloading the page Modify the Navigation bar's attributes (such as co ...

javascriptajaxhtmlnavigationhistory

The chart is failing to refresh with the latest response information (using Chart.js version 3.2.1 and ng2-charts version 3.0.0-beta.9)

I recently upgraded my project using Chart.js version 3.2.1 and ng2-charts version 3.0.0-beta.9. Initially, everything seemed to be working fine with mock data - the charts were displaying as expected. However, when I switched to testing with real backend ...

angularchart.jsng2-chartschart.js3

The link and source attributes are missing from the .ejs template

I am experiencing an issue where the href and src attributes in my .ejs file are not referencing my local files properly. My setup involves node.js and express. Here is a snippet from the .ejs template that is causing the problem. <head> & ...

javascripthtmlnode.jsexpress

Setting a static width for a specific cell in HTML5 - What's the best way to go about it?

When working with HTML5, how do I define a specific width for a table cell? Many of the <col> properties that were present in HTML4 are no longer applicable in HTML5. Just to clarify, I am aware that I can use <td style="width:150px">, but thi ...

csshtml

What is the best way to apply overlays to customize a specific part of a single character while also accommodating dynamic width adjustments?

Query Is it feasible to style a specific portion of a single character? Interpretation You cannot apply CSS attributes to parts of characters. However, if you wish to style only a particular section of a character, there is currently no standardized met ...

htmlcssoverlay

What steps can I take to avoid conflicts between behavior subjects when making next() calls?

I am facing an issue with a BehaviorSubject variable named saveToLocalStorage. In one of my methods, the next() method is called twice, but only one of the calls is being completed while the other one gets overwritten. The service subscribed to these calls ...

angulartypescriptrxjsobservablebehaviorsubject

iterative outcomes with ajax and jquery scripting in javascript

Hey there! I'm trying to create a JavaScript script using AJAX that will extract the id and value of a button when hovered over. The extracted value will then be sent to a PHP script on the same page, where it will be used as a variable for searching ...

javascriptphpjquerycssajax

Attempting to modify the background hue of a Bootstrap 5 Button using javascript

I've been experimenting with changing the background color of a bootstrap 5 button using JavaScript. While I've been able to successfully change the text color with JavaScript, altering the button's color has proven to be elusive. Below is ...

javascripthtmlbootstrap-5