在客户导航栏wordpress中突出显示当前页面

时间:2019-06-04 05:30:14

标签: php jquery wordpress navigation

我正在尝试突出显示我目前所处的页面

$(".navigation a").on("click", function () {
    $(".navigation ").find(".active").removeClass("active");
    $(this).parent().addClass("active");
});

这是到目前为止我尝试过的唯一的jquery,但是它似乎不起作用:

{{1}}

1 个答案:

答案 0 :(得分:1)

如果您要构建标准的WordPress网站,则在单击导航链接时将重新加载页面,因此,即使您使用jQuery设置了类,也会在页面加载时将其重置。

您应该做的是在PHP中设置导航元素的类。

此代码仅是一个样机,请对其进行调整以满足您的需求:

$home = is_front_page();
# Checks if it's the site front page

$contacts = is_page('contacts');
# Checks if the current page is a page called 'contacts'

$aboutus = is_page('aboutus');
# Checks if the current page is a page called 'aboutus'

$aboutyou = is_page('aboutyou');
# Checks if the current page is a page called 'aboutyou'

    <ul class="navigation list-unstyled components">
                <li <?php if ($home) {echo 'class="active"';} ?>>
                    <a href="<?php echo site_url(); ?>">Home</a>
                </li>
                <li <?php if ($contacts) {echo 'class="active"';} ?>>
                    <a href="<?php echo site_url(); ?>/contacts">Contacts</a>
                </li>
                <li <?php if ($aboutus) {echo 'class="active"';} ?>>
                    <a href="<?php echo site_url(); ?>/aboutus">aboutus</a>
                </li>
                <li <?php if ($aboutyou) {echo 'class="active"';} ?>>
                    <a href="<?php echo site_url(); ?>/aboutyou">aboutyou</a>
                </li>
            </ul>