Попытка выделить активный пункт меню

Question

Вот мой HTML, который показывает меню боковой панели:

    <div class="sidebar">
      <a class="active" href="<website>/humrec.php">HR Homepage</a>
      <a href="<website>/hrbenefits.php">Benefits Information</a>
      <a href="#contact">Scheduling</a>
      <a href="#about">Links</a>
    </div>

Вот код jQuery, который у меня есть, но все еще не работает:

    $(document).ready(function(){
        $(".sidebar a").click(function ( e ) {
            e.preventDefault();
            $(".sidebar a.active").removeClass("active"); //Remove any "active" class  
            $("a", this).addClass("active"); //Add "active" class to selected tab  

            // $(activeTab).show(); //Fade in the active content  
        });
    });

Answer 1

Вы логично c почти правильно, но проблема $("a", this). Этот селектор ищет элемент a в this. Проблема в том, что this - это a, который был только что нажат, поэтому вы ищете a в a, который не соответствует структуре HTML, которую вы получили.

Чтобы решить проблему, вам просто нужно использовать $(this) для ссылки на a, по которому щелкнули:

jQuery(function($) {
  $(".sidebar a").click(function(e) {
    e.preventDefault();
    $(".sidebar a.active").removeClass("active");
    $(this).addClass("active");
  });
});

.active {
  color: #C00;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sidebar">
  <a class="active" href="<website>/humrec.php">HR Homepage</a>
  <a href="<website>/hrbenefits.php">Benefits Information</a>
  <a href="#contact">Scheduling</a>
  <a href="#about">Links</a>
</div>