Switch the style of the anchor tag using JavaScript

Question

Switch the style of the anchor tag using JavaScript

I need assistance with modifying a list on my webpage. Here is the current structure:

 <ul id="breadcrumbs" class="breadcrumbs-two">
        <li><a href="#" class="current"  id="a1">Step1</a></li>
        <li><a href="#"  id="a2">Step2</a></li>
        <li><a href="#"  id="a3">Step3</a></li>
        <li><a href="#"  id="a4">Step4</a></li>
        <li><a href="#"  id="a5">Complete</a></li>
    </ul>

I want to apply a CSS class to an anchor tag when a specific link button is clicked.

The CSS code to be applied is as follows:

 .breadcrumbs-two .current
    {
        background: #99db76;
    }

    .breadcrumbs-two .current, .breadcrumbs-two .current:after
    {
        border-left-color: #99db76;
    }

    .breadcrumbs-two .current, .breadcrumbs-two .current:before
    {
        border-color: #99db76 #99db76 #99db76 transparent;
    }

How can this be achieved?

I attempted the following approach

function addClass(dis) {
        dis.className += "current";
    }

 <li><a href="javascript:addClass(this)"  id="a1">Step1</a></li>

  <asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="addClass('a1')">Done</asp:LinkButton>

However, it is not functioning as expected.

If anyone could provide guidance, I would greatly appreciate it.

Thank you in advance. Gulrej

javascript jquery asp.net css

Answer 1

Answer №1

For those needing a navigation menu, you may want to consider this approach based on what I'm currently using in my project:

 $('.breadcrumbs-two li a').click(function(){
        $(this).parent().parent().children('li').removeClass('current');
        $(this).addClass('current');
 });

When clicking a link, it will clear the styling from previously selected links and apply the .current class to the newly clicked link.

I initially assumed that the <li> tags were the targets for clicks. You could test out this alternative method:

$.fn.breadcrumb = function( content, title ){
    $(this).parent().parent().children('li').removeClass('current');
    $(this).addClass('current');
};

$('#LinkButton1').click(function(){
    $(this).breadcrumb();
});

Answer 2

For those needing a navigation menu, you may want to consider this approach based on what I'm currently using in my project:

 $('.breadcrumbs-two li a').click(function(){
        $(this).parent().parent().children('li').removeClass('current');
        $(this).addClass('current');
 });

When clicking a link, it will clear the styling from previously selected links and apply the .current class to the newly clicked link.

I initially assumed that the <li> tags were the targets for clicks. You could test out this alternative method:

$.fn.breadcrumb = function( content, title ){
    $(this).parent().parent().children('li').removeClass('current');
    $(this).addClass('current');
};

$('#LinkButton1').click(function(){
    $(this).breadcrumb();
});

Answer 3

Answer №2

You have the flexibility to apply different styles and colors using CSS for active, visited, hover, link states, and more.

a {
    outline: 0;
    text-decoration: underline;
}

a:link {
    color: #0099FF;
}

a:visited {
    color: #0099FF;
}

a:hover {
    color: #FFFF00;
}

a:active {
    color: #33FF66;
}

Answer 4

You have the flexibility to apply different styles and colors using CSS for active, visited, hover, link states, and more.

a {
    outline: 0;
    text-decoration: underline;
}

a:link {
    color: #0099FF;
}

a:visited {
    color: #0099FF;
}

a:hover {
    color: #FFFF00;
}

a:active {
    color: #33FF66;
}

Answer 5

Answer №3

Give this a shot:

$(document).ready(function(){
    $('.crumbs-2 a').click(function(){

        $('.crumbs-2 a').removeClass('active');
        $(this).addClass('active');

    })
})

Answer 6

Give this a shot:

$(document).ready(function(){
    $('.crumbs-2 a').click(function(){

        $('.crumbs-2 a').removeClass('active');
        $(this).addClass('active');

    })
})

Answer 7

Answer №4

Include the following code in your anchor tag's href attribute

javascript:toggleClass(this)

Create this function in JavaScript

function toggleClass(element)
{
   element.className = element.className + ' customclass';
}

Answer 8

Include the following code in your anchor tag's href attribute

javascript:toggleClass(this)

Create this function in JavaScript

function toggleClass(element)
{
   element.className = element.className + ' customclass';
}

Switch the style of the anchor tag using JavaScript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having Trouble with the Fancybox Title Attribute Showing Up?

What is the best way to specify the JSDoc types for this.field within the Mocha TestContext during the before() hook, in order to provide clarity for other it() tests as well as IntelliJ?

Issue with ExpressJS Regex not correctly matching a path

What is the best way to retrieve an object from every function?

Set a variable to represent a color for the background styling in CSS

Obtain the length of a sound file in .wav format

Executing a function on a dropdown menu in AngularJS

Initiating a file download using HTML

Using Jquery to insert error messages that are returned by PHP using JSON

unresponsive script caused by videoegg javascript code

When trying to use selenium.WebDriver, an error pops up: "missing ) after argument list."

upload document to joomla

Adjust the translateX value and element size based on either the parent element's size or the window's dimensions

Checking if children have certain text using jQuery

What is the best way to align a container in the middle of the page without positioning the text in the center

Gather information from a customizable Bootstrap table and store it in an array

Refreshing html in nodejs after a fetch promise remains in a pending state

How can I access data from a function that is executed within a method in Vue.js?

What could be causing the issue with perspective not functioning properly?

Is there a way to selectively import specific functions from a file in NextJs/React rather than importing the entire file?