Question

我正在尝试建立一个具有一些基本功能的网站。我在顶部添加了导航栏＆gt;

<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

一个简单的决定是在主要部分中添加隐藏字段。例如如果你有}

 <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>');        

 });

你需要关于隐藏这些字段的事情，例如点击另一个元素。您可以将同一个类添加到所有元素中。示例

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

  jQuery(document).ready(function(){

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


  });

对于ajax，您可以创建一个新文件data.php，其中正在获取并返回您的数据库数据。然后

<script>

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

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

         });
     });

</script>

Answer 2

您可以针对此类方案寻找jquery ajax。您可以从下面的代码中获取一个想法。

我们的想法是在每个菜单链接中都有一个唯一的class，并在其data-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 / Jquery / PHP实现菜单栏

2 个答案: