我正在尝试建立一个具有一些基本功能的网站。我在顶部添加了一个导航栏->
<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>
现在在 main area 中,最初应该是空的,我希望它根据从导航栏中选择的菜单显示内容。例如对于Create Member,它应该显示一个表单;对于通知,它应该显示一些消息。
任何人都可以指导我该怎么做。我对 Javascript 和 JQuery 有一些了解。
最佳答案
对于这种情况,您可以使用 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);
});
});
});
希望对您有所帮助。
关于javascript - 使用 Javascript/Jquery/PHP 实现菜单栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33461310/