Ways to eliminate color from a link upon clicking a different one

Question

Ways to eliminate color from a link upon clicking a different one

I had a specific idea in mind - to create a simple menu bar where clicking on a particular link would display related content below. The chosen link should turn blue when selected. I managed to come up with the following code:

<a href="#" class="link">Link 1</a>
<a href="#" class="link active">Link 2</a>
<a href="#" class="link">Link 3</a>

a, a:visited { color:black }
a.link.active { color:blue; }

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

Check it out on this Fiddle: https://jsfiddle.net/gHb9F/. It functions as intended, but I now want "Link 2" to be blue upon window load and change back to black once another link is clicked.

javascript jquery html css hyperlink

Answer 1

Answer №1

You have the option to trigger a click event on the second link using JavaScript,

$(function() {
  $('a.link').click(function() {
    $('a.link').removeClass('active');
    $(this).addClass('active');
  }).eq(1).click();
});

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>

Alternatively, you can also directly add the 'active' class to the second link using jQuery,

$(function() {
  $('a.link').click(function() {
    $('a.link').removeClass('active');
    $(this).addClass('active');
  }).eq(1).addClass('active');
});

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>

Another approach is to include the 'active' class directly in the HTML markup for the second link,

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

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link active">Link 2</a>
<a href="#" class="link">Link 3</a>

Answer 2

You have the option to trigger a click event on the second link using JavaScript,

$(function() {
  $('a.link').click(function() {
    $('a.link').removeClass('active');
    $(this).addClass('active');
  }).eq(1).click();
});

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>

Alternatively, you can also directly add the 'active' class to the second link using jQuery,

$(function() {
  $('a.link').click(function() {
    $('a.link').removeClass('active');
    $(this).addClass('active');
  }).eq(1).addClass('active');
});

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>
<a href="#" class="link">Link 3</a>

Another approach is to include the 'active' class directly in the HTML markup for the second link,

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

a,
a:visited {
  color: black
}
a.link.active {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="#" class="link">Link 1</a>
<a href="#" class="link active">Link 2</a>
<a href="#" class="link">Link 3</a>

Ways to eliminate color from a link upon clicking a different one

Answer №1

Similar questions

Is it advisable to restrict ajax requests?

connect validation of the form to a separate component from the current one

Creating fresh texts by pairing the values in constants with variables

Enable Component to Exceed to the Following Line

JS Issue with triggering .click() function

Retrieve the <style> tag response and inject it into the head section of the HTML using React

What are the IF conditions for multiple radio button fields using jQuery?

How can I maintain my bottom navigation bar in Bootstrap 3 without using a 3 span icon?

What is the best way to customize the label of Material UI's Tab component?

Which HTTP headers pertain to the loading of iframes? nuxt-helmet

Tips for concealing information that is scrolled beneath a translucent layer

Searching for a particular Prettier setting

The fit-content max-height property is not functioning properly in Firefox

Adding a component to a slot in Vue.js 3

Unleash the power of jQuery by incorporating the Ajax functionality with a hover option to enhance user interactivity. Utilize the .ajax

Utilizing Loops in a React Component's Function

Issues with passing parameters in JavaScript

What causes the layout of an application to become distorted when I extend the theme in Tailwind.css?

Why isn't jQuery working properly for showing/hiding elements?

Are There Other Ways to Replicate the Actions of an Anchor Link/Target Pseudo-Class?