jQuery - faire un lien cliqué souligné

Question

commence tout juste à me salir les mains avec la bonté jQuery et la première tâche que je tente d’aborder consiste à souligner un lien après avoir cliqué dessus. Naturellement, après avoir cliqué sur un lien différent dans la même div, le précédent n'est plus souligné ...

Cordialement

Answer 1

Donc, en gros, vous voulez un type de menu de navigation qui change le style du lien une fois que vous avez cliqué. Tout d’abord, créez un style qui souligne simplement:

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

Le code que vous allez modifier est ...

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

Juste quelques liens avec un type de classe qui indique que ce sont les liens que vous voulez souligner et non souligner.

Ensuite, ajoutez un peu de magie jQuery pour appliquer le style en cliquant dessus. Et en même temps, vous voudrez supprimer le style de tous les autres.

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

Et c'est tout. J'ai essayé de décrire le plus verbeusement possible ce que chaque étape fait. Évidemment, vous pouvez raccourcir les noms de classes et supprimer les commentaires pour les rendre plus petits et plus minces.

Answer 2

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

Ensuite, bien sûr, vous devez avoir une classe appelée "souligné", soulignant les liens.

Answer 3

voici une version plus propre:

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