使用Javascript/jQuery/PHP實現菜單欄

Question

我正在嘗試構建一個具有一些基本功能的網站。我已經添加在頂>

<nav> 
     <ul> 
      <a href="#"><li>Create Member</li></a> 
      <a href="#"><li>Notifications</li></a> 
      <a href="#"><li>Edit Records</li></a> 
      <link rel="stylesheet" href="index.css"> 
     </ul> 

     <div class="handle">Menu</div> 
    </nav> 
    <section> 
    </section> 

現在，在主區域中的導航欄，這應該是最初爲空，我希望它根據從導航欄選擇的菜單顯示內容。例如，對於創建成員它應顯示一個表單;通知它應該顯示一些消息。

任何人都可以指導我該怎麼做。我對JavaScript和JQuery有一些瞭解。

Answer 1

你可以去jquery ajax這種情況。你可以從下面的代碼中獲得一個想法。

這個想法是在每個菜單鏈接中都有一個唯一的class，並且在data-url屬性中有一個必需的URL。然後對他們的點擊，我們將調用一個javascript功能，將考慮data-url ATTR點擊鏈接，並會ajax電話與url填補的主要領域如下：

HTML代碼：

<nav> 
     <ul> 
      <a href="#"><li class="menulink" data-url="/nav/createMember">Create Member</li></a> 
      <a href="#"><li class="menulink" data-url="/nav/notifications">Notifications</li></a> 
      <a href="#"><li class="menulink" data-url="/nav/editRecord">Edit Records</li></a> 
      <link rel="stylesheet" href="index.css"> 
     </ul> 

     <div class="handle">Menu</div> 
</nav> 
<div class="mainsection"> 
</div> 

jQuery代碼：

$(document).ready(function(){ 
    $("li.menulink").click(function(){ 
     var url = $(this).data("url"); //fetch the URL from data-url attr 

     //make the jquery ajax get call to load the newer contents 
     $.get(url, function(data, status){ 
      $(".mainsection").empty().html(data); 
     }); 
    }); 
}); 

希望這將幫助你一點。

Answer 2

的一個簡單的決定是在主要部分添加隱藏字段..for例如 如果你有}

<a href="#" id="create-member"> 
<!-- Hide the span --> 
<style> 
    #create-member-info {display: none;} 
</style> 

<section> 
    <span id="create-member-info">Information here</span> 
</section> 

<script> 
    $(document).ready(function(){ 

      $('ul a').click(function(){ 

       var elementToDisplay = $(this).attr('id'); 
       $('#'+elementToDisplay+"-info").show(); 

      }); 

    }); 

</script> 

這是實現該功能的一些很基本的例子。如果您想進一步的幫助只是寫:)

另一種方法是手動附加/添加在jQuery代碼的附加信息元素

jQuery(document).ready(function(){ 

     $('section').append('<span>Additional Information here</span>');   

}); 

你要的東西有關隱藏這個領域，例如在另一個點擊元件。您可以在同一類添加到所有elements..Example

<span class="to-hide"></span> 

    jQuery(document).ready(function(){ 

     $('.to-hide').hide(); 
     $('section').append('<span class="to-hide">Additional information here</span>'); 


    }); 

對AJAX可以創建這樣你的數據庫數據正在get和返回一個新的文件data.php。然後

<script> 

    $(function(){ 
     $.get("data.php", function(data){ 

      $('section').append(data (html formed before that ::))); 

     }); 
    }); 

</script>