Question

我很惊讶Bootstrap没有提供自动切换.active栏中不同链接之间的.nav类的工具。

所以我搜索并获得了一些帮助，并尝试将此脚本应用到我的菜单中：

$('.nav li a').on('click', function() {
    alert("class added " + $(this).parent().find('a').attr('href'));
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
});

这是HTML：

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <!-- blah blah -->
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
                <li class="active"><a href="{{ URL::to('/') }}">Home</a></li>
                <li><a href="{{ URL::to('/directions') }}">Directions</a></li>
            </ul>
        </div>
    </div>
</nav>

发生的奇怪事情是，当我点击Directions时，.active课程已从Home移除，然后转到Directions，但仅仅半秒钟，然后它又恢复到以前的状态。

我“调试”了这样的目标：

$('.nav li a').on('click', function() {
    alert("clicked " + $(this).attr('href'));
    alert("class removed-> " + $(this).parent().parent().find('.active').find('a').attr('href'));
    alert("class added " + $(this).parent().find('a').attr('href'));
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
});

点击Directions时输出为：

点击http://localhost:8000/directions
类已删除http://localhost:8000
类已添加http://localhost:8000/directions

因此，定位正确的元素似乎没有错。

脚本有什么问题，为什么会发生这种奇怪的事情？

Answer 1

您的代码必定存在其他问题，您发布的代码按预期工作。这是一个小提琴：

http://jsfiddle.net/StephanWagner/xnVM9/

$('.nav li a').on('click', function() {
    $(this).parent().parent().find('.active').removeClass('active');
    $(this).parent().addClass('active');
});

我删除了崩溃类，因此它更容易在小提琴中看到，但它也适用于类。

Answer 2

由于脚本由于某种原因不起作用，我最终为菜单中的每个选项执行此操作：

<li class="{{ Request::path() == 'directions' ? 'active' : '' }}">

活动链接菜单切换奇怪的行为（Bootstrap）

2 个答案: