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

好的....所以使用这个模板你正在使用bootstraps 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");
        }
    });
});

然后将其添加到您的nav元素。

data-nav-highlight="true"

所以看起来像这样

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

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

注意：我在stackoverflow上找到了这个代码但是找不到帖子来引用它，如果有人能找到它可以自由编辑我的帖子。

Bootstrap Navigation Active不适用于链接

3 个答案: