javascript - 使用 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>

现在在 main area 中，最初应该是空的，我希望它根据从导航栏中选择的菜单显示内容。例如对于Create Member，它应该显示一个表单；对于通知，它应该显示一些消息。

任何人都可以指导我该怎么做。我对 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);
        });
    });
});

希望对您有所帮助。