jQuery - sottolineando un collegamento cliccato

Question

Ho appena iniziato a sporcarmi le mani con la bontà di jQuery e il primo compito che sto cercando di affrontare è quello di sottolineare un link dopo che è stato cliccato. Naturalmente, dopo aver fatto clic su un collegamento diverso nello stesso div, il precedente non è più sottolineato ...

Saluti

Answer 1

Quindi, in sostanza, stai cercando una specie di menu di navigazione che cambi lo stile del link una volta cliccato. Innanzitutto, crea uno stile che sottolinea appena:

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

Il codice che modificherai è ...

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

Solo alcuni link con un qualche tipo di classe che indica che sono i link che vuoi sottolineare e non sottolineare.

Successivamente, aggiungi un po 'di magia jQuery per applicare lo stile facendo clic. E allo stesso tempo, vorrai rimuovere lo stile da tutti gli altri.

<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>

E questo è tutto. Ho cercato di spiegare il più dettagliatamente possibile ciò che ogni passo fa. Ovviamente, puoi abbreviare i nomi delle classi e rimuovere i commenti per renderli piccoli e snelli.

Answer 2

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

Quindi, ovviamente, devi avere una classe chiamata " sottolineata " ;, che sottolinea i collegamenti.

Answer 3

ecco una versione più pulita:

<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>