jQuery - making a clicked link underlined

Question

Hello, just starting to get my hands dirty with the jQuery goodness and the first task i'm trying to tackle is to underline a link after it has been clicked. Naturally, after a different link in the same div was clicked the previous one is no longer underlined...

Regards

Answer 1

$("a").click(function() {
  var $this = $(this);
  $this.closest("div").find("a").removeClass("underlined");
  $this.addClass("underlined");
});

Then, of course, you need to have a class called "underlined", that underlines the links.

Answer 2

So basically, you are wanting a kind of navigation menu that changes the style of the link once clicked. First, make a style that just underlines:

<style type="text/css">
a.currentlyActive
{
  text-decoration: underline;
}
</style>

The code you will be modifying is...

<a class="navigation" href="#">My First Link</a>
<a class="navigation" href="#">My Second Link</a>
<a class="navigation" href="#">My Third Link</a>

Just a few links with some type of class that denotes that it is the links u want to underline and not underline.

Next, add a little jQuery magic to apply the style upon clicking. And at the same time, you will want to remove the style from all others.

<script type="text/javascript">
$(function() {
  $('.navigation').click(function() {
    // this removes the underline class from all other ".navigation" links.
    $('.navigation').removeClass('currentlyActive');

    // this makes the one that was clicked underlined
    $(this).addClass('currentlyActive');
  });
});
</script>

And, that's it. I tried to as verbose as possible to explain what each step does. Obviously, you can makes the class names shorter and remove the comments to make it small and lean.

Answer 3

here is a cleaner version:

<style type="text/css">
.underline { border-bottom:1px solid #000; }
</style>

<script type="text/javascript">
$(function() {
    $('a').click(function() {
     $('a').removeClass('underline');
     $(this).addClass('underline');
    });
});
</script>

Answer 4

Thank you very much for submitting your answers it helped a lot with the issue. Sorry for taking long time to reply to the thread.