Transforming the appearance of a clickable link when tapped

Is there a simple way in Bootstrap 5 to change the style of a clicked link to an "active" style while reverting the previously clicked link back to normal? Or is this something that would require custom CSS/JS?

<ul class="nav nav-pills flex-column">
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Award" asp-route-StatusId="@Context.Request.Query["StatusId"]">Highest Awarded</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Update" asp-route-StatusId="@Context.Request.Query["StatusId"]">Last Updated</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Newest" asp-route-StatusId="@Context.Request.Query["StatusId"]">Date Added (Newest)</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Oldest" asp-route-StatusId="@Context.Request.Query["StatusId"]">Date Added (Oldest)</a></li>
</ul>

For example, when I click on Highest Awarded, the previously clicked link returns to its normal style and the Highest Awarded link gets an "active" class added, changing its style accordingly.

htmlcsstwitter-bootstrapbootstrap-5

Answer №1

For more information, visit https://getbootstrap.com/docs/5.0/components/navs-tabs/#javascript-behavior

Utilize Bootstrap's tabs feature to easily toggle visibility of elements using data attributes. In the provided example, the first <button> includes data attributes 

data-bs-toggle="tab" data-bs-target="#home"
. This setup corresponds to a tab-pane with an identifier of home.

Answer №2

$("ul li").on("click",function(){
  $(this).addClass("active").siblings().removeClass("active")
})
.active{
   color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav nav-pills flex-column">
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Award" asp-route-StatusId="@Context.Request.Query["StatusId"]">Highest Awarded</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Update" asp-route-StatusId="@Context.Request.Query["StatusId"]">Last Updated</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Newest" asp-route-StatusId="@Context.Request.Query["StatusId"]">Date Added (Newest)</a></li>
   <li><a class="nav-link link-light" asp-controller="Home" asp-action="Index" asp-route-SortString="Oldest" asp-route-StatusId="@Context.Request.Query["StatusId"]">Date Added (Oldest)</a></li>
</ul>

This jquery workaround is a simple solution, but you could also achieve it using vanilla JS. You can customize the styles for the active class as needed. Bootstrap may not provide a direct solution for this prior to version 5.0. Feel free to leave a comment if you encounter any issues.

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

Steer clear of wrapping ng-repeat in nested indexes for routing purposes

I am currently working on an Angular application that displays data in 3 item columns using Bootstrap. To achieve this layout, I have implemented the following code snippet to group my array of data into sets of 3: examples.success(function(data) { $sc ...

javascriptangularjstwitter-bootstrapangularjs-ng-repeat

how to target the last child element using CSS commands

<a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> <a><div class="myDiv"></div></a> // This specific one is what ...

htmlcss

Utilize the return function in a separate PHP file

I wanted to create a basic login form as a way to dive into learning php. After setting up the form, I wrote a function that sends a query to a MySQL database to fetch the username and password (stored in md5 encryption) for comparison with user input. T ...

phphtmlmysql

Is there a way to enable scrolling on the page upon loading, without moving the embedded PDF object itself?

After embedding a PDF object on my webpage, I noticed that when loading the page and scrolling using the mouse wheel, it actually scrolls up and down inside the PDF instead of moving through the entire page. To fix this issue, I have to first click in a bl ...

javascripthtml

What could be causing my dropdown menu to vanish unexpectedly after being clicked for the first time?

To view the live demonstration, simply click here. I have an issue with my drop down menu where it is hidden upon first click. Additionally, I would like the drop down menu to disappear when clicked anywhere outside of its current display. How can I accomp ...

jquerycssdrop-down-menuslidetoggle

Discovering the background color of see-through HTML elements using Selenium

Looking to count the characters with a specific background color. I am currently traversing through all the HTML nodes using this method: Counting inner text letters of HTML element Example HTML Page: <span style="background-color: #ffff00;"> ...

htmlseleniumwebdriverbackground-color

Adding CSS properties to an image within the ImageResourceCell of a CellTable

After creating a CellTable with an image column in GWT using ImageResource, I encountered a problem. I needed to change some CSS properties of the image such as size or adding 'cursor="pointer" for a click event, but was unsure how to do so. When insp ...

cssgwtcelltableclientbundle

Tips for setting background colors as a prop for Material UI cards in React JS

Currently utilizing the Material UI next framework to construct a wrapper for the card component. This customized wrapper allows for personalization of the component. I have successfully extended the component so that the title and image within the card ca ...

javascriptcssreactjsmaterial-uijss

Top approach for creating/previewing a website using PHP, CSS, and MYSQL

When creating a website that will eventually be hosted on a remote server, what is the most effective way to code and test? Here are some examples of what I mean: - Develop locally on your computer and access files from there. Should libraries and databa ...

phphtmlmysqlcssdevelopment-environment

Tips for ensuring a static html element remains visible at the bottom of the screen even when the soft keyboard is opened in iOS Safari

Within a webpage, there is an input field and a fixed div positioned at the bottom of the window using CSS properties such as position:fixed; and bottom:0;. To better illustrate this setup, I have created a Codepen demo which can be viewed here: https://c ...

htmlioscsssafarikeyboard

Insert a fresh item into the existing unordered list

Every time I enter something in the prompt, it shows up as "undefined". What I actually want is for whatever I type into the prompt to be added as a new list item. For instance, if I type "Food" in the prompt, I expect to see "Food" appear on the second li ...

javascripthtml

Add the number provided in the input to the href

I'm attempting to add a number from an input field to the URL in a link. Currently, my code is replacing the entire URL instead of simply adding to the end of it: <input id='customquantity' type='number'></input> < ...

jqueryhtml

What techniques can be used to resize an image to perfectly fit a square on a webpage?

A challenge on the web page is to display images in a square format of 90 * 90 pixels. However, the sizes of these images are not consistent and may vary from 80*100 to 100*80 or even 90 * 110. The requested solution is to stretch the image as follows: ...

javascripthtmlcss

Adaptive component transformation

Hey there, I'm having some trouble figuring this out... I need help with making sure that the element identified by the red rectangle in the images moves in alignment with the containers below, regardless of the screen size. I want to create a respon ...

csshtmlresponsive-design

Sending a request to a PHP file using Ajax in order to display information fetched from

I am attempting to display the database row that corresponds with the student's forename and surname selected from the dropdown list. I have managed to store the first name and surname in a variable called clickeditem. However, I suspect there may be ...

phpjqueryhtmlmysqlajax

Error encountered in ASP.NET Core MVC due to dependency inversion with CRUD operations

Today I delved into dependency inversion. Prior to implementing this concept, my CRUD system was functioning well, but now I am encountering some errors. The error message says "Cannot implicitly convert type int to ContractLayer.UsersDto." In the image pr ...

c#htmlasp.net-mvcasp.net-corerazor-pages

Transforming HTML produced by an outdated ASP system to generate modern ASP.NET 2.0 web pages

I have a friend who is currently working on developing a solution to convert aspx pages from html pages generated by an older asp application. The plan involves running the legacy app, capturing the html output, cleaning the html with a tool like HtmlTidy ...

c#.netpythonhtml

Dynamic layout problem with navigation pills

I currently have 2 navigation pill buttons designed to alter the layout upon being clicked. Both layouts always include the sidebar which remains constant throughout. Clicking on Nav pill 1 will display the layout as follows: sidebar | column 1 | column ...

htmlcsstwitter-bootstrapbootstrap-5

Javascript and iframes may encounter compatibility issues with browsers other than Internet Explorer

My HTML file includes an iframe and JavaScript that function correctly in IE Browser, but they do not work in other browsers such as Safari and Firefox. When using Safari, only the iframe box is displayed without showing the content inside it. I am curio ...

javascripthtmliframesafaricross-browser

Problems with form functionality in React component using Material UI

Trying to set up a signup form for a web-app and encountering some issues. Using hooks in a function to render the signup page, which is routed from the login page. Currently, everything works fine when returning HTML directly from the function (signup), ...

javascripthtmlreactjscomponentsmaterial-ui