子菜单未在页面加载时自动添加类

Sub menu not auto adding class on page load

本文关键字：添加加载菜单更新时间：2023-09-26

我有一个页面，正在尝试自动设置子菜单上的活动链接。我在主导航的标题上使用了相同的代码，但子导航工作不正常。我已经提醒了url的值，以确保它是正确的，但它甚至没有进入.each循环。

这是页面

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <!-- Link to CSS stylesheets -->
    <link href="css/main.css" type="text/css" rel="stylesheet"/>
    <!-- jQuery Hosted Library Link -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <!-- jQuery Scripts -->
    <script>
        $(document).ready(function(e) {
            // Get url and set navigation to the corresponding active page
            $(function(){
                // Set active main nav tab
                var pgurl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
                if(pgurl.indexOf('?') > -1){
                    pgurl = pgurl.substring(0, pgurl.indexOf('?'));
                }
                if(pgurl.indexOf('#') > -1){
                    pgurl = pgurl.substring(0, pgurl.indexOf('#'));
                }
                $("#nav-main ul li a").each(function(){
                      if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
                      $(this).addClass("a-active");
                 });
                 resizeDiv();
                 // Resize the sections to fit to the window height
                 function resizeDiv(){
                     vph = $(window).height();
                     vph = vph - 111;
                     $('#left-column').css({'min-height': vph});
                     $('#right-column').css({'min-height': vph});
                 }
                 // Import correct side nav
                 var side = pgurl.substring(0, pgurl.indexOf('.php'));
                 $.ajax({
                    url: "include/nav-side-"+side+".php", success: function(result){
                        $('#nav-side').html(result);
                        }, error: function (){
                            $('#nav-side').html("<p>An error has occurred importing the navigation.</p>");
                        }
                 });
                 // Set active sub nav listing
                 var suburl = window.location.href.substr(window.location.href.lastIndexOf("/")+1);
                 if(suburl.indexOf('#') > -1){
                     suburl = suburl.substring(0, suburl.indexOf('#'));
                 }
                 $("#nav-side ul li a").each(function(){
                      if($(this).attr("href") == suburl || $(this).attr("href") == '' )
                      $(this).addClass("a-active");
                 });
            });
        });
    </script>
    <title>Senneca Portal | Adminstration Panel</title>
</head>
<body>
    <?php require_once("include/header.php"); ?>
    <section id="content">
        <section id="left-column">
            <img id="profile-img" src=""/>
            <nav id="nav-side"></nav>
        </section>
        <section id="right-column">
            <div id="content-header">
                <button id="create">Add <?php echo $pageName; ?></button>
                <h2><?php echo $pageName; ?></h2>
            </div>
        </section>
    </section>
</body>
</html>

这是我为子导航导入的导航uls。

    <ul>
    <p class="p-nav-side-title">Admin Controls</p>
    <li><a href="admin.php">Websites</a></li>
    <li><a href="admin.php?page=products">Products</a></li>
    <li><a href="admin.php?page=library">Library</a></li>
    <li><a href="admin.php?page=users">Users</a></li>
</ul>

但由于某种原因，这甚至没有进入导航侧元素的第二个.每个循环。

我相信这是因为它在加载时被ajaxed到页面中。如何在导入时使其正常工作？

我认为"//设置活动子导航列表"部分并没有等待ajax完成，所以它是在加载导入的侧导航之前执行的。

试试这个：

            $.ajax({
                        url : "include/nav-side-" + side + ".php",
                        success : function(result) {
                            $('#nav-side').html(result);
                            // Set active sub nav listing
                            var suburl = window.location.href.substr(window.location.href.lastIndexOf("/") + 1);
                            if (suburl.indexOf('#') > -1) {
                                suburl = suburl.substring(0, suburl.indexOf('#'));
                            }
                            $("#nav-side ul li a").each(function() {
                                if ($(this).attr("href") == suburl || $(this).attr("href") == '')
                                    $(this).addClass("a-active");
                            });
                        },
                        error : function() {
                            $('#nav-side').html("<p>An error has occurred importing the navigation.</p>");
                        }
                    });
                });
            });