Question

我正在开发一个Web应用程序，我在标题中遇到了菜单问题。我解释得更好：我的页面分为这样：

<div>
   <header>
      <font color=white align='center'>HEADER</font>
      <nav class='clearfix'>
          <ul class='clearfix'>
              <li><a id='home' href='#'>Home</a></li>
              <li><a id='pagina1' href='#'>pagina1</a></li>
              <li><a id='pagina2' href='#'>pagina2</a></li>
          </ul>
          <a href='#' id='pull'>Menu</a>
      </nav>
   </header>
</div>
<main>
    <h1> Main</h1>
</main>

<footer>
    <nav class='clearfix'>
    <font color=white align='center'>FOOTER</font>
    </nav>
</footer>

显然我还有其他页面，如pagina1.php和pagina2.php

现在....我想在点击菜单上的按钮时加载pagina1.php。

我尝试了一些脚本，但似乎没有用......有人能帮帮我吗？

Answer 1

您尚未指定要转到的链接的位置。 HREF =＃39＆;＃＆＃39;会让你在同一页上。将其更改为任何其他网址。

例如

<li><a id='home' href='/home.php'>Home</a></li>
<li><a id='pagina1' href='/pagina1.php'>/pagina1</a></li>
<li><a id='pagina2' href='/pagina2.php'>/pagina2/a></li>

编辑：由于您最近的评论表明您想要在点击链接时更改main的内容，这应该可以解决问题。

创建一个名为pagina1.html（或php，无所谓）的页面并添加以下内容：

Pagina1
创建一个名为pagina2.html（或php，无关紧要）的页面并添加以下内容：

Pagina 2

将现有页面修改为：

<!DOCTYPE html>
<html>
<head>
<script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function () {
  $("#pagina1").click(function(){
    $.ajax({url:"pagina1.html",success:function(result){
      $("#main").html(result);
    }});
  });

  $("#pagina2").click(function(){
    $.ajax({url:"pagina2.html",success:function(result){
      $("#main").html(result);
    }});
  });
});
</script>
</head>

<div>
   <header>
      <font color=white align='center'>HEADER</font>
      <nav class='clearfix'>
          <ul class='clearfix'>
              <li><a id='home' href='#'>Home</a></li>
              <li><a id='pagina1' href='#'>pagina1</a></li>
              <li><a id='pagina2' href='#'>pagina2</a></li>
          </ul>
          <a href='#' id='pull'>Menu</a>
      </nav>
   </header>
</div>
<div id="main">
    <h1> Main</h1>
</div>

<footer>
    <nav class='clearfix'>
    <font color=white align='center'>FOOTER</font>
    </nav>
</footer>

我已经创建了一个plunk，您可以在其中看到代码正常工作： http://plnkr.co/edit/iJZSbWYCWGH3NKBzwY7u?p=preview

Answer 2

你需要ajax，这样的事情，请参阅http://www.w3schools.com/jquery/ajax_ajax.asp

$("#pagina1, #pagina2").click(function(){
    page = $(this).attr("id");
    $.ajax({url: page + ".php", success: function(result){
        $("main").html(result);
    }});
});

Answer 3

只需使用加载功能

$("#pagina1").click(function(){
        $("main").empty();
        $("main").load(pagina.php);

});
$("#pagina2").click(function(){
        $("main").empty();
        $("main").load(pagina2.php);

});

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div>
   <header>
      <font color=white align='center'>HEADER</font>
      <nav class='clearfix'>
          <ul class='clearfix'>
    <li id='home'>Home</a></li>
    <li id='pagina1'>pagina1</a></li>
    <li id='pagina2'>pagina2</a></li>
          </ul>
          <a href='#' id='pull'>Menu</a>
      </nav>
   </header>
</div>
<main>
    <h1> Main</h1>
</main>

<footer>
    <nav class='clearfix'>
    <font color=white align='center'>FOOTER</font>
    </nav>
</footer>

MAIN部分中的目标href

3 个答案: