我希望链接在页面加载时具有不同的样式。例如,如果我单击About Us
菜单项并转到我希望它显示为突出显示的页面,以让用户知道他们在该页面上使用 jQuery。
我尝试了以下代码:
$("#navigation").click(function()
{
$('li').addClass('current-menu-item');
});
触发“关于我们”后,您的链接将更改类,但是当页面加载时,所有 js 更改都会消失。您需要根据您的位置更改类,而不是点击,而是 onload 页面
$(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 的一种快速简便的方法是在请求自身的页面中,因此...
关于.php
<?php
$page = "about"
?>
<html>
....
</html>
有很多方法可以做到这一点,所以你只需要发挥创造力。这就是编程的美妙之处:)