引导导航栏类=来自单独页面时的活动更改

Question

我一直在尝试解决类似情况的方法，但到目前为止都没有奏效。

问题来了，我总共有 2 个 html 文件。在我的导航栏上，我有 4 个选项。其中 3 个指的是同一页面（索引）上的 id，第 4 个指的是单独的页面。现在从单独的页面返回到索引，活动菜单项不是正确的“活动”菜单项。就像我在支持页面上单击“关于”一样，活动菜单项是“主页”。或者，如果我单击“联系人”，活动菜单项将变为“关于”。出现的内容是正确的。但活动菜单项不是。

来自index.html 文件：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="support" ><a href="support.html">Support</a></li>
        <li ><a href="#contact">Contact</a></li>
</ul>
</div>

这是来自support.html：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right">
        <li><a href="index.html#home">Home</a></li>
        <li><a href="index.html#about">About</a></li>
        <li class="current"><a href="#support">Support</a></li>
        <li ><a href="index.html#contact">Contact</a></li>
    </ul>
</div>

这是我尝试但没有结果的解决方案之一： https://stackoverflow.com/a/11539359

JS不是我的强项，非常感谢你的帮助！

Answer 1

例如，您加载脚本的方式存在很多问题

 $(document).ready(function() {
        $('#ind').cycle({
            fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        });
    });

你在加载 jquery 之前调用它，所以它给出 $ 是未定义的错误，所以解决方案是在最后移动所有脚本，并且菜单处理程序也有一个内联脚本，将其移至文档就绪函数

我已将修复包含在以下文件HTML Zip files 中，您会发现所有 JS 都已移至末尾。它现在对我来说工作正常

还有一件事使您的接触高度与其他容器相同，或者从医师部分删除额外的边距/填充