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

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文件中包含此修复程序，您会发现所有JS都已移至末尾。 现在对我来说很好

还有一件事情使您的接触高度与其他容器相同，或者从“内科医生”部分删除了多余的空白/填充