导航栏中的 Umbraco 活动项目不起作用

Question

我目前正在开发一个应用程序，我发现导航栏中所选视图的活动状态很重要：设计明智。

但我还没有设法让它工作，我目前正在尝试从我的 main.js 运行我的脚本，如果我在我的视图上运行它，它会说

Uncaught ReferenceError: $ is not defined at (index):69

感觉要么我的脚本不工作，要么我的脚本根本不运行，我不知道是哪一个

导航栏

<nav class="navbar navbar-expand-lg navbar-light bg-light bd-navbar">
    <div class="container">
        <a class="navbar-brand" href="/default.aspx"><img src="@Model.Content.Icon.GetCropUrl("brandLogo")" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto w-100 justify-content-end">
                <li class="nav-item dropdown">
                    <a class="nav-link active" href="@Model.Content.Url" aria-haspopup="true" aria-expanded="false">
                        @Model.Content.Name
                    </a>
                </li>

                @foreach (var item in Model.Content.Children)
                {
                    if (item.Children.Any() && !item.Name.Equals("Protected"))
                    {
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                @item.Name
                            </a>
                            <ul class="dropdown-menu">

                                @foreach (var page in item.Children)
                                {
                                    if (Umbraco.MemberHasAccess(item.Path))
                                    {
                                        <li>
                                            <a class="dropdown-item" href="@page.Url" aria-haspopup="true" aria-expanded="false">@page.Name</a>
                                        </li>
                                    }
                                }

                            </ul>
                        </li>
                    }
                    else
                    {
                        if (Umbraco.MemberHasAccess(item.Path) && !item.Name.Equals("Protected"))
                        {
                            <li class="nav-item">
                                <a class="nav-link" href="@item.Url" aria-haspopup="true" aria-expanded="false">@item.Name</a>
                            </li>
                        }
                    }
                }
                @if (!Umbraco.MemberIsLoggedOn())
                {
                    <li class="nav-item">
                        <a class="nav-link" href="/protected/login/" aria-haspopup="true" aria-expanded="false">Login</a>
                    </li>
                }
                else
                {
                    <li class="nav-item">
                        @Html.Partial("/Views/Partials/Root/Login/LoginStatus.cshtml")
                    </li>
                }
            </ul>
        </div>
    </div>
</nav>

脚本

function navBarActive() {
    $(".nav .nav-link").on("click", function () {
        $(".nav").find(".active").removeClass("active");
        $(this).addClass("active");
    });
}

Master.cshtml

    </footer>
        <script src="~/assets/js/jquery-3.0.0.min.js"></script>
        <script src="~/assets/js/popper.min.js"></script>
        <script src="~/assets/js/bootstrap.min.js"></script>
        <script type="text/javascript" charset="utf8" 
        src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"> 
        </script>
        <script src="~/assets/js/smoothscroll.js"></script>
        <script src="~/assets/js/jquery.appear.js"></script>
        <script src="~/assets/js/main.js"></script>
</body>

Answer 1

所以这不是 Umbraco 问题，问题是您尝试在包含 JQuery 之前运行此脚本（假设它完全包含在内）。如果您在此视图中使用某种布局，您可以在正文之前引用 JQuery，然后让脚本在视图中运行。如果您希望将它放在您的 main.js 文件中，请确保在您引用 JQuery 之后在您的视图中引用该 main.js 文件（或者在您的包中，如果您正在捆绑您的脚本）。

如果您还没有在项目中使用 JQuery，this may help