Javascript 在 Bootstrap 导航栏中不起作用答案

【问题标题】：Javascript is not working in Bootstrap navbarJavascript 在 Bootstrap 导航栏中不起作用
【发布时间】：2015-10-11 09:15:39
【问题描述】：

我正在使用引导导航栏，但我不确定为什么我的 javascript 在下面无法正常工作：

<script type="text/javascript">
$(".nav a").on("click", function () {
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
});
</script>

以下内容包含在我的布局中：

<!-- jQuery -->
@Scripts.Render("~/bundles/jquery");
<!-- Bootstrap Core JavaScript -->
@Scripts.Render("~/bundles/bootstrap");

这是我的部分代码有问题，请告知谢谢！

               <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">Reports</a>
                    </div>
                    <div>
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Weekly Tickets</a></li>
                            <li><a href="#">Yearly Tickets</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Status <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="@Url.Action("ViewChartsByYearMonth", "Charts")">Per Month</a></li>
                                    <li><a href="@Url.Action("ViewCharts", "Charts")">Per Year</a></li>
                                </ul>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Severity<span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Per Month</a></li>
                                    <li><a href="#">Per Year</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>

【问题讨论】：

不工作是什么意思？请检查控制台是否有错误
导航栏活动状态不起作用。它不会改变。
每当我包含另一个源 javascript 工作但导航栏的下拉功能不起作用。
如果有错误请检查控制台

标签： javascript jquery twitter-bootstrap navbar

【解决方案1】：

尝试将它包装在 jQuery Document 中，也可以

$(document).ready(function() {
  $(".nav a").on("click", function () {
    $(".nav").find(".active").removeClass("active");
    $(this).parent().addClass("active");
  });
});

也更好用：("ul.nav").find("li.active").removeClass("active");

....最好将您的控制台日志用于调试，但请确保您的 jQuery 也不会与其他 Javascript 框架冲突...

同时检查 jQuery 是否指向正确的 URL...

【讨论】：