Question

我希望链接在页面加载时具有不同的样式。例如，如果我单击About Us菜单项并转到我希望它显示为突出显示的页面，让用户知道他们在该页面上使用jQuery。

我尝试过以下代码：

$("#navigation").click(function()
{
    $('li').addClass('current-menu-item');
});

Answer 1

触发“关于我们”后，您的链接将更改课程，但是当页面加载时，所有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
});

Answer 2

如果你有一个清单

在服务器端，您需要跟踪您所在的页面。有很多方法可以做到这一点，但有一种方法是

<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>

有很多方法可以做到这一点，所以你只需要有创意。这就是编程之美:)。

动态css类jQuery

2 个答案: