Question

我有一个页面，我正在尝试在子菜单上自动设置活动链接。我在主导航的标题上使用相同的代码，但子导航无法正常工作。我已经提醒了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>

出于某种原因，虽然这甚至没有进入导航侧元素的第二个.each循环。

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

Answer 1

我认为＆＃34; //设置活动子导航列表＆＃34;部分不是等待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>");
                        }
                    });

                });
            });

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

1 个答案: