我希望链接在页面加载时具有不同的样式。例如,如果我单击About Us
菜单项并进入页面,我希望它显示为高亮显示,以让用户知道他们在该页面使用jQuery。
我尝试了以下代码:
$("#navigation").click(function()
{
$('li').addClass('current-menu-item');
});
触发'About Us'后,你的链接将改变类,但当页面加载时,所有js更改将消失。你需要改变类不是点击,而是加载页面,基于你的位置
$(function() {
if (window.location == '/about') // change about to what you page on
$('#navigation li a[href=/about]').parent().addClass('current-menu-item'); // change here link too
});
如果你有一个列表
在服务器端,您将想要跟踪您在哪个页面。有很多方法可以做到这一点,其中一种方法是
<ul>
<li data-link="home">Home</li>
<li data-link="about">About Us</li>
<li data-link="contact>Contact</li>
</ul>
,如果使用PHP,例如
$(document).ready(function() {
var currentPage = "<?= $page ?>";
$('li[data-link='+currentPage+']').addClass('current-menu-item');
});
处理哪个链接获得类'current-menu-item'在服务器端要好得多,但为了一个快速的例子,我使用jquery。
任何时候你想在页面加载时做一些事情,你可以把它放在$(document).ready中http://api.jquery.com/ready/
编辑
设置$page的一种简单快捷的方法是在请求的页面中…
about.php
<?php
$page = "about"
?>
<html>
....
</html>
有很多方法可以做到这一点,所以你只需要发挥创造力。这就是编程的美妙之处:)