Twitter bootstrap 引导导航处于活动状态，不适用于链接

我使用了一个引导模板中的导航栏，该模板是一个页面布局，导航向下滑动，而不是链接到另一个页面

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

例如，当链接类似于“#服务”时，活动类工作，因此它向下滚动，然后活动类工作，但是当您放置诸如“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>

切换导航

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

任何指向外部页面的链接都需要以页面名称的href开头。然后，为了激活该页面上的活动类，您还必须添加相同的类a

data target=“#page top”

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

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

因此，假设外部页面的名称为test.html。您的索引导航李将如下所示

 <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 navbar品牌将如下所示

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

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

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

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

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

我认为活动类应该在
上定义。
这实际上很容易用一点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>


...
...

这将突出显示当前页面，您仍然可以使用scroll spy
如果需要，也可以突出显示页面本身中的活动链接

注意：我在stackoverflow上找到了这段代码，但找不到引用它的帖子，如果有人可以找到，请随意编辑我的帖子。
我尝试了这段代码，但似乎没有效果=S这是我使用的引导导航，您可以看到它附带的应用CSS。我对此有很大的问题，似乎在任何地方都找不到答案。链接：只是根据你使用的模板修改了我的答案。这将完美地工作了。如果您遇到任何问题，请告诉我。这将不起作用。他正在使用一个非常特殊的模板，其中scrollspy属性和html已经被修改。我昨天的第一个答案是一个简单的js补丁，就像你的一样，但这是在他发布到实际模板的链接之前。不用担心……你的思路是对的。他只是在他的问题中还没有发布到他的模板的链接。我把它编辑好了，希望它能很快出现。