WordPress 导航活动答案

【问题标题】：Wordpress Navigation activeWordPress 导航活动
【发布时间】：2015-09-09 13:04:22
【问题描述】：

我一直在创建一个单页 wordpress 网站，我希望导航链接一旦进入特定的 div 就能够处于活动状态

http://www.copeswebdevelopment.co.uk/

我不知道你想看什么类型的代码，告诉我，我会告诉你

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="<?php echo home_url(); ?>">
                    <img src="http://www.copeswebdevelopment.co.uk/wp-content/uploads/2015/06/BusinessLogowp.png">
                </a>
        </div>

        <?php
        wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'container'         => 'div',
                'container_class'   => 'collapse navbar-collapse',
                'container_id'      => 'bs-example-navbar-collapse-1',
                'menu_class'        => 'nav navbar-nav navbar-right',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker())
            );
        ?>


</div>
    <!-- /container -->

【问题讨论】：

链接不应用作问题内容。实时查看代码会很有用，但您需要在问题中添加代码的相关部分。我们不应该通过外部链接来理解您的问题的含义。
你想看什么类型的代码？我刚刚把我的 header.php 放在上面

标签： wordpress navigation

【解决方案1】：

对于锚点菜单，您可以使用一些 JS（此处为 jQuery）设置活动部分，这些 JS 将根据页面中的位置更改活动部分。这样，它不仅会在点击事件时改变活动状态，而且在用户手动滚动页面时也会改变。

首先我们设置document.ready 和window.scroll 来触发处理状态变化的函数，并根据菜单链接构建页面部分的数组：

var activePage, sections = [];

$(document).ready(function () {
    changeActiveMenu();
    $('nav a').each(function() {
        sections.push($(this).attr('href'));
    });
    $(window).scroll(function() {
        changeActiveMenu();
    });
});

然后以下函数将首先检查使用$.isOnScreen 插件显示的部分（您需要包含该部分才能使其工作）。由于它目前已设置为激活至少 50% 可见的部分。

function changeActiveMenu()
{
    var page = null;
    for(var key in sections) {
        if($(sections[key]).isOnScreen(null, 0.5)) {
            page = sections[key];
        }
    }
    if(page != null && page != activePage) {
        $('nav a.active').removeClass('active');
        $('nav a[href='+page+']').addClass('active');
        activePage = page;
    }
}

【讨论】：