引导导航活动不适用于链接

Question

我使用了来自 Bootstrap 模板的导航栏，该模板是单页布局，导航向下滑动而不是链接到不同的页面。

我尝试更改链接以链接到不同的页面，但是当我这样做时，活动类不起作用，所以你被困在一个新页面上，而不知道你在哪个页面上（除非你阅读了内容），因为导航不会告诉你。

例如，当链接类似于“#services”时，活动类起作用，因此它向下滚动，然后活动类起作用，但是当您输入诸如“index.php”或“index.html”之类的内容时，活动课程将不再起作用。

有人知道我该如何解决这个问题吗？

这是导航栏 HTML：

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" 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 page-scroll" href="#page-top">Start Bootstrap</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a class="page-scroll" href="#about">About</a>
                </li>
                <li>
                    <a class="page-scroll" href="#services">Services</a>
                </li>
                <li>
                    <a class="page-scroll" href="#portfolio">Portfolio</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Answer 1

好的....因此，使用此模板，您将使用引导程序 scrollspy 功能，该功能确定页面的活动链接。不幸的是，它只考虑了当前页面上的锚点，并且没有为单独的页面使用相同的 css。所以这就是你需要做的。

任何指向外部页面的链接都需要以页面名称的 href 开头。然后，您还必须在同一类中添加 data-target="#page-top" 以激活该页面上的活动类 li。

这里有点复杂。在外部页面上，您将不得不将第一页的锚链接更改为在每个锚名称之前包含 index.html。这将确保在任何其他页面上，当您单击它们时，您会返回到相同的部分。

另外...在外部页面上，您需要将 navbar-brand href 更改为 index.html，这样当您点击您的品牌名称时，它会将您带回到您的主页而不是您的顶部现有页面。

假设您的外部页面的名称是 test.html。您的索引导航 li 将如下所示。

 <li><a class="page-scroll" href="#about">About</a></li>
 <li><a class="page-scroll" href="#services">Services</a></li>
 <li><a class="page-scroll" href="#portfolio">Portfolio</a</li>
 <li><a class="page-scroll" href="#contact">Contact</a></li>
 <li><a class="page-scroll" href="test.html" data-target="#page-top">Test</a></li> 

您的 test.html 导航栏品牌将如下所示

<a class="navbar-brand page-scroll" href="index.html">Start Bootstrap</a>

您的 test.html 导航 li 将如下所示

 <li><a class="page-scroll" href="index.html#about">About</a></li>
 <li><a class="page-scroll" href="index.html#services">Services</a></li>
 <li><a class="page-scroll" href="index.html#portfolio">Portfolio</a></li>
 <li><a class="page-scroll" href="index.html#contact">Contact</a></li>
 <li><a class="page-scroll" href="test.html" data-target="#page-top">Test</a></li>

Answer 2

我认为应该在<li> 上定义活动类。 http://getbootstrap.com/components/#navbar-default

Answer 3

这实际上很容易用一点 jQuery 解决。

// highlight active page in navigation
$(function () {
    $("nav[data-nav-highlight='true']").find("li").children("a").each(function () {
        if ($(this).attr("href") === window.location.pathname) {
            $(this).parent().addClass("active");
        } else {
            $(this).parent().removeClass("active");
        }
    });
});

然后将其添加到您的导航元素中。

data-nav-highlight="true"

所以它看起来像这样

<nav style="height: 1px;" aria-expanded="false" class="navbar-collapse collapse" data-nav-highlight="true">
      ...
      ...
 </nav>

这将突出显示当前页面，您仍然可以使用滚动间谍 如果您愿意，也可以突出显示页面本身内的活动链接。

注意：我在 stackoverflow 上找到了这段代码，但找不到引用它的帖子，如果有人能找到它，请随时编辑我的帖子。