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

导航栏中的Umbraco活动项目无法正常运行

1 个答案: