Добавление активного класса в меню
Я добавляю class="active" в nav > ul >li с помощью jQuery для изменения цвета фона. Он работает, когда href="#" . Но когда я добавляю ссылку между href="example.php" - она переходит на страницу. но активный класс не работает, и фон не показывает, где я нахожусь.
возможна ли работа по ссылке, а также изменение фона, чтобы показать, на какой странице я сейчас нахожусь, с помощью jQuery или как они работают в WP?
$(document).ready(function(){
$(".menu").on('click','li', function(){
$(".menu .active").removeClass('active');
$(this).addClass('active');
} );
});
<ul class = "menu">
<li class = "active"><a href = "index.php">Home</a></li>
<li><a href = "bestdeal.php">Best Deal</a></li>
<li><a href = "#">Shop</a>
<ul>
<li><a href = "#">Sub menu</a></li>
<li><a href = "#">Sub menu</a></li>
</ul>
</li>
<li><a href = "#">About Us</a>
<ul>
<li><a href = "#">Sub menu</a></li>
<li><a href = "#">Sub menu</a></li>
</ul>
</li>
<li><a href = "#">Contact Us</a></li>
</ul>
Ответы 2
Да, это немного сложно, когда вы меняете страницы — вам нужен способ отправить идентификатор клика на новую страницу. В большинстве случаев мы можем использовать для этого немного jQuery. (JQuery прервет действие по умолчанию <a>, создаст <form> скрытое поле, содержащее информацию, которую вы хотите отправить, а затем submit() форму)
Но может быть и более простой способ... Для каждой страницы просто сделайте элемент меню ЭТОЙ страницы активным классом.
Если простой способ не работает, в этом ответе SO есть демонстрация, которая должна вам помочь:
Как передать данные на другую страницу с помощью jquery ajax
Спасибо за ваш ответ . Я новичок, попробую так.
Вы можете попробовать проверить, точно ли href страницы соответствует вашей ссылке, если это не ссылка #.
$(document).ready(function(){
var $links = $('.menu li a');
$links.closest('.active').removeClass('active');
$links.filter(function(){
return this.href === window.location.href;
}).closest('li').addClass('active');
});.active a { color: red }<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class = "menu">
<li class = "active"><a href = "index.php">Home</a></li>
<li><a href = "/js">My Amazing Code Snippet on Stack Overflow</a></li>
<li><a href = "#">Shop</a>
<ul>
<li><a href = "#">Sub menu</a></li>
<li><a href = "#">Sub menu</a></li>
</ul>
</li>
<li><a href = "#">About Us</a>
<ul>
<li><a href = "#">Sub menu</a></li>
<li><a href = "#">Sub menu</a></li>
</ul>
</li>
<li><a href = "#">Contact Us</a></li>
</ul>
Ваш класс, скорее всего, применяется, но затем происходит навигация по страницам, оставляя ваши стили на предыдущей странице. Вы можете проверить URL-адрес при загрузке страницы и проверить наличие любого .menu> li> a с соответствующим href и повторно применить стиль.