jquery с подсветкой навигационной панели (начальной загрузки) текущая ссылка работает только временно?

Question

У меня есть панель навигации, и я надеюсь выделить текст текущей выбранной ссылки. Несмотря на то, что я могу заставить подсветку работать, используя jquery, она подсвечивается только в течение приблизительно 1 секунды, а затем по умолчанию используется обычный цвет.

Моя навигационная панель HTML:

<nav class="navbar">

      <div class="container-fluid" width='300px' >
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span> 
            </button>

        </div>
        <div class="collapse navbar-collapse navbar-right" id="myNavbar">
          <div class="thumbnail tile tile-medium tile-green">
                <a href="BJIA.html" class="fa-links">
                <h1 class="tileHeading">Home</h1>  
                <i class="fas fa-home fa-lg"></i>
                </a>
                </div>
            <div class="thumbnail tile tile-medium tile-green">
                <a href="about.html" class="fa-links">
                <h1 class="tileHeading">About</h1>
                <i class="fas fa-info-circle fa-lg"></i>
                </a>
                </div>
            <div class="thumbnail tile tile-medium tile-green">
                <a href="programs.html" class="fa-links">
                <h1 class="tileHeading">Programs</h1>
                <i class="fas fa-sitemap fa-lg"></i>
                </a>
                </div>
            <div class="thumbnail tile tile-medium tile-orange">
                <a href="data.html" class="fa-links">
                <h1 class="tileHeading">Data</h1>
                <i class="fas fa-database fa-lg"></i>
                </a>
                </div>
    </div>
      </div>
  </nav>

jquery:

  $(document).ready(function(){ 
var activeNavItem = $('.tileHeading');

activeNavItem.click(function(){
  activeNavItem.removeClass('active');
  $(this).addClass('active');  
});
});

И CSS:

.tileHeading {
    font-size:28px !important;

}
.tileHeading.active {
  background-color: red
}

Любая помощь приветствуется в отношении того, почему это происходит.

Answer 1

Ваш код jQuery просто устанавливает / сбрасывает active класс для всех .tileHeading при каждом .tileHeading клике. Вам нужно создать логи переключения c, например:

$(document).ready(function(){ 
  $('.tileHeading').on('click', function(e) {
    // Prevent the page from reloading
    e.preventDefault();

    // Remove .active from the current active .tileHeading
    $('.tileHeading.active').removeClass('active');

    // Set the .active class to the current clicked element
    $(this).addClass('active');  

  });
});

ОБНОВЛЕНИЕ

Я создал простой фрагмент Navbar, который демонстрирует приведенный выше код и что переключается между навигационными ссылками при нажатии.

$(document).ready(function(){ 
  $('.tileHeading').on('click', function(e) {
    
    e.preventDefault();
    
    // Remove .active from the current active .tileHeading
    $('.tileHeading.active').removeClass('active');

    // Set the .active class to the current clicked element
    $(this).addClass('active');  

  });
});

.tileHeading.active {
  color: red !important;
}

.thumbnail {
  display: inline-block;
}

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<nav id="navbar" class="navbar navbar-expand navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <div class="nav-item nav-link thumbnail tile tile-medium tile-blue">
        <a href="BJIA.html" class="fa-links">
          <span class="tileHeading active">Home <i class="fa fa-home fa-lg"></i></span>
        </a>
      </div>
      <div class="nav-item nav-link thumbnail tile tile-medium tile-green">
        <a href="about.html" class="fa-links">
          <span class="tileHeading">About <i class="fa fa-info-circle fa-lg"></i></span>
        </a>
      </div>
      <div class="nav-item nav-link thumbnail tile tile-medium tile-red">
        <a href="programs.html" class="fa-links">
          <span class="tileHeading">Programs <i class="fa fa-sitemap fa-lg"></i></span>
        </a>
      </div>
      <div class="nav-item nav-link thumbnail tile tile-medium tile-orange">
        <a href="data.html" class="fa-links">
          <span class="tileHeading">Data <i class="fa fa-database fa-lg"></i></span>
        </a>
      </div>
    </div>
  </div>
</nav>