Добавить класс к ссылке

329

25 июля 2017, 18:33

Есть меню. Нужно, чтобы при нажатии на любой из пунктов меню - он подчеркивался черной линией. При нажатии на следующий пункт меню - в предыдущем подчеркивание пропадало, а в новом - появлялось.

Вот мой код:

<script type="text/javascript"> 
$(document).ready(function(){ 
  $('.topmenulink').click( 
    function() { 
      $( this ).removeClass('activelink'); 
    }, function() { 
      $( this ).addClass('activelink'); 
    } 
  ); 
}); 
</script>

.activelink { 
color: #222; 
border-bottom: 2px solid #222; 
padding-bottom: 5px; 
}

<span id="left-top-menu"><a class="topmenulink" href="/zhenschinam/">Женщинам</a></span> 
<span id="left-top-menu"><a class="topmenulink" href="/muzhchinamm/">Мужчинам</a></span> 
<span id="left-top-menu"><a class="topmenulink" href="/detjamd/">Детям</a></span>

Проблема в том, что при нажатии на ссылку - страница перезагружается и подчеркивание появляется только на момент нажатия и потом пропадает.

Вот живой пример: https://bigcitymart.ru/

Answer 1

Классика жанра. Надо снимать класс со всех ссылок, на всякий случай и добавлять тому, на который нажали:

$(document).ready(function(){ 
    $('.wrapper').on('click', '.topmenulink', function(e){ 
        e.preventDefault(); 
        $('.topmenulink').removeClass('activelink'); 
        $( this ).addClass('activelink'); 
    }); 
});

.activelink { 
color: #222; 
border-bottom: 2px solid #222; 
padding-bottom: 5px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
  <span id="left-top-menu"><a class="topmenulink" href="/zhenschinam/">Женщинам</a></span> 
  <span id="left-top-menu"><a class="topmenulink" href="/muzhchinamm/">Мужчинам</a></span> 
  <span id="left-top-menu"><a class="topmenulink" href="/detjamd/">Детям</a></span> 
</div>

А перезагружается страница потому, что нажимаете на ссылку, а для нее срабатывает дефолтное поведение: идти по ссылке. Чтобы этого небыло, надо предотвращать поведение через e.preventDefault(); например.

P.S. у вас у всех span стоит один идентификатор left-top-menu. Так делать не стоит!

Answer 2

$('.topmenulink').on('click', function(e) { 
  e.preventDefault(); // предотвращаем стандартное поведение перехода по ссылке 
  $('.topmenulink').removeClass('activelink'); // убираем класс у всех кнопок 
  $(this).addClass('activelink'); // добавляем класс нажатой кнопке 
});

.activelink { 
  color: #222; 
  border-bottom: 2px solid #222; 
  padding-bottom: 5px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<span id="left-top-menu"><a class="topmenulink" href="/zhenschinam/">Женщинам</a></span> 
<span id="left-top-menu"><a class="topmenulink" href="/muzhchinamm/">Мужчинам</a></span> 
<span id="left-top-menu"><a class="topmenulink" href="/detjamd/">Детям</a></span>