jQuery - создание подчеркнутой ссылки

Question

только начинаю пачкать руки с помощью jQuery, и первая задача, которую я пытаюсь решить, - это подчеркнуть ссылку после того, как она нажата. Естественно, после того, как была нажата другая ссылка в том же div, предыдущая больше не подчеркивается ...

Привет

Answer 1

Таким образом, в основном вам нужно своего рода навигационное меню, которое меняет стиль ссылки после нажатия. Сначала создайте стиль, который подчеркивает:

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

Код, который вы будете изменять: ...

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

Несколько ссылок с классом, который обозначает, что это ссылки, которые вы хотите подчеркнуть, а не подчеркнуть.

Затем добавьте немного магии jQuery, чтобы применить стиль при нажатии. И в то же время вы захотите удалить стиль из всех остальных.

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

И это все. Я постарался максимально подробно объяснить, что делает каждый шаг. Очевидно, что вы можете сделать имена классов короче и удалить комментарии, чтобы сделать их маленькими и простыми.

Answer 2

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

Тогда, конечно, вам нужен класс с именем "подчеркнутый", который подчеркивает ссылки.

Answer 3

вот более чистая версия:

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