子菜單沒有自動添加頁面加載類

我有一個頁面，我試圖自動設置子菜單上的活動鏈接。我在主導航的標題上使用了相同的代碼，但子導航無法正常工作。我已經提醒了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循環。

我相信這是因爲它加載到頁面上的原因。我怎樣才能讓它在導入時正確工作？

來源

2015-11-06 Alex Beyer

移動的東西后，AJAX調用到AJAX調用成功功能。 – Quantastical

工作。我以爲我曾嘗試過。爲什麼這個工作，但它沒有工作，當我有jQuery外部和Ajax調用後？在ajax調用之後它會不會仍在那裏？ –

不，JavaScript的工作方式是調用AJAX行，而JavaScript只是繼續前進。它不會等待AJAX完成。這就是成功/完整/失敗的功能。在收到AJAX響應後處理代碼。 – Quantastical

我認爲「//設置活動的子導航列表」部分不會等待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>"); 
         } 
        }); 

       }); 
      });

來源

2015-11-06 16:43:19 Vivek

這是正確的Quantastical也擊敗你 –

很高興它的工作，無所謂誰幫你。 – Vivek

子菜單沒有自動添加頁面加載類

回答

相關問題