Javascript在Bootstrap导航栏中不起作用

Question

我正在使用引导导航栏，但不确定为什么我的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>

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