Как я могу активировать статус, когда нажимаю на навигационное меню?

Question

У меня есть меню, включающее следующее li

<div class="menu">
    <ul>
       <li><a href="index.jsp" class="active">Home</a></li>
       <li><a href="listnews.jsp">News</a></li>
       <li><a href="abc.jsp">ABC</li>
    </ul>
</div>

В этом коде активна домашняя страница.Но хотите активировать активный статус, когда я нажимаю на мою страницу новостей.Как я могу сделать?Спасибо за просмотр.

Answer 1

Вы можете использовать jQuery для этого, используйте следующий скрипт:

$(document).ready(function () {
  $('.menu ul li a').click(function () {
     // This will remove active class from other links
    $('.menu ul li').find('a.active').removeClass('active');    
    // This will add active class to the link clicked 
      $(this).addClass('active');
   });
});

Answer 2

Пожалуйста, добавьте Js как:

jQuery(document).ready(function () {
  jQuery('.menu li a').click(function () {
      //removing the previous selected menu state
      jQuery('.menu li').find('a.active').removeClass('active');
      //adding the state for this parent menu
      jQuery(this).addClass('active');

  });
});

a.active {
 color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
    <ul>
       <li><a href="index.jsp" class="active">Home</a></li>
       <li><a href="listnews.jsp">News</a></li>
       <li><a href="abc.jsp">ABC</li>
    </ul>
</div>

Answer 3

Вот код, использующий чистый JavaScript

화이팅 !!

function change(elem){
  var list = document.querySelectorAll(".menu ul li a");

  for (var i = 0; i < list.length; ++i) {
    list[i].classList.remove('active');
  }
  elem.classList.add('active');
}

.active{
color:red;
}

<div class="menu">
    <ul>
       <li><a href="#" class="active" onclick="change(this)">Home</a></li>
       <li><a href="#" onclick="change(this)">News</a></li>
       <li><a href="#" onclick="change(this)">ABC</a></li>
    </ul>
</div>

Answer 4

С некоторыми JS или JQuery, добавьте событие click в ваши ссылки и вызовите метод

<div class="menu">
    <ul>
       <li><a href="index.jsp" click="MyMethod">Home</a></li>
       <li><a href="listnews.jsp" click="MyMethod">News</a></li>
       <li><a href="abc.jsp" click="MyMethod">ABC</li>
    </ul>
</div>

и в Jquery (или JS): выполните это:

YourLinkClicked.removeClass('active');
YourLinkClicked.addClass('active');

Илипросто посмотрите на эту ссылку: http://jsfiddle.net/designaroni/E53t9/

Answer 5

Вот некоторая базовая функция, которую я использую для моего текущего проекта MVC.

Добавьте это на главную страницу или общие страницы, js нужно запускать каждый раз при перезагрузке сайта.

и вам нужно использовать jquery

$(document).ready(function () {
  // the current page url eg /index.jsp
  var href = window.location.href.toLowerCase();
  
  $(".menu").find("a").each(function () {
    // find the current li that match the current Url
    if (href.indexOf($(this).attr("href").toLowerCase()) != -1)
           $(this).addClass("active"); // set the current li to active
     })
 })

.acive{
color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
    <ul>
       <li><a href="index.jsp" class="active">Home</a></li>
       <li><a href="listnews.jsp">News</a></li>
       <li><a href="abc.jsp">ABC</li>
    </ul>
</div>