HTML列表选择<；李>；调用php应用程序

在我的第一个页面（index.php）中遇到了一些困难，这些是我希望得到的东西。我想这些问题可以用HTML来解决

我希望左侧有菜单列表，选中后，应该能够调用其他php程序，这些程序将显示在右侧

左侧列表中的所选项目应加粗

默认页面应为“主页”（选择列表中的第一个）

我已经给出了下面的代码，我想出了，但它不工作的方式，我喜欢它的工作

index.php的一部分

<table id="structure">
<tr>
    <td id="navigation">
       <ul class = subjects>
          <li><a href="manage.php?page=1">Home</a></li>
          <li><a href= "#B">Pet Listing</a></li>
          <li><a href= "#B">Galary</a></li>
          <li><a href= "#B">Clubs</a></li>
          <li><a href= "#B">Member area</a></li>
          <li><a href= "#B">Contact us</a></li>
        </ul>
      </td>
      <td id="page">
        <h2> Home </h2>
        <div class = "page-content" >
            <p> We noticed that many pet owners are isolated with little knowledge to bring up their pets....... </p> 
        </div>
      </td>
    </tr>
</table>

---

jQuery提供了一种非常方便的方法，可以加载HTML并插入到指定的元素中

用法示例：

<table id="structure">
<tr>
    <td id="navigation">
       <ul class ="subjects">
          <li><a href="manage.php?page=1">Home</a></li>
          <li><a href="pet.php">Pet Listing</a></li>
          <li><a href="gallery.php">Galary</a></li>
          <li><a href="clubs.php">Clubs</a></li>
          <li><a href="member.php">Member area</a></li>
          <li><a href="contact.php">Contact us</a></li>
        </ul>
      </td>
      <td id="page">
        <h2> Home </h2>
        <div class = "page-content" >
            <p> We noticed that many pet owners are isolated with little knowledge to bring up their pets....... </p> 
        </div>
      </td>
    </tr>
</table>

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- optional if you have jQuery already -->
<script>
$(document).ready(function() {
  // Once the page is ready for using jQuery, we now bind a "click" action to all "a" element via CSS selector which will be processed by jQuery. 
  $(".subjects a").click(function() {
    // Whenever any link of above is clicked, it goes to here

    // This is a convenient method provided by jQuery to do:
    //   1. Try to make a HTTP request (AJAX) to the link (this.href = the content of the "href" attribute of the element clicked)
    //   2. Once it gets the response, put the content to div with class ".page-content"
    $(".page-content").load(this.href);

    // Return false here so that the browser will not go directly the link, but stay on the same page instead
    return false;
  });
});
</script>

家
我们注意到许多宠物主人被孤立，几乎不知道如何抚养他们的宠物

$（文档）.ready（函数（）{
//一旦页面准备好使用jQuery，我们现在通过CSS选择器将一个“单击”操作绑定到所有“a”元素，该选择器将由jQuery处理。
$（“.a”）。单击（函数（）{
//无论何时单击上面的任何链接，都会转到此处
//这是jQuery提供的一种方便的方法：
//1.尝试向链接发出HTTP请求（AJAX）（this.href=单击元素的“href”属性的内容）
//2.收到响应后，将内容放入div，并使用class“.page content”
$（“.page content”）.load（this.href）；
//此处返回false，以便浏览器不会直接访问链接，而是停留在同一页面上
返回false；
});
});

---

注意：请避免使用表格来布局页面。尝试使用CSS+div——一种更好的布局方式：D

如果您希望它更改当前页面的内容，您必须使用AJAX（我建议使用jQuery）。AJAX？对我来说，如果是唯一的方式，我想我会在下一个工作。谢谢DanThanks，我将按照建议尝试CSS方法。我对jQuery一无所知（我刚刚开始学习php）。我也会努力的。我在这里的主要困惑是如何从一个部分调用php代码，并在另一个部分上显示结果。在本例中，从调用php代码并获取要在jQuery中显示的代码的结果，jQuery只是一个流行的JavaScript库，它可以节省您处理复杂事情（如AJAX）的时间。要从导航中“调用php代码”并获得结果，实际上没有AJAX是无法做到这一点的。因为PHP和HTML相互通信的唯一方式是通过HTTP请求，这是通过浏览（即第一次发送给用户浏览器的页面）或后续AJAX调用完成的。我在我的示例中添加了注释，以让您了解更多已完成的操作。

<table id="structure">
<tr>
    <td id="navigation">
       <ul class ="subjects">
          <li><a href="manage.php?page=1">Home</a></li>
          <li><a href="pet.php">Pet Listing</a></li>
          <li><a href="gallery.php">Galary</a></li>
          <li><a href="clubs.php">Clubs</a></li>
          <li><a href="member.php">Member area</a></li>
          <li><a href="contact.php">Contact us</a></li>
        </ul>
      </td>
      <td id="page">
        <h2> Home </h2>
        <div class = "page-content" >
            <p> We noticed that many pet owners are isolated with little knowledge to bring up their pets....... </p> 
        </div>
      </td>
    </tr>
</table>

<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <!-- optional if you have jQuery already -->
<script>
$(document).ready(function() {
  // Once the page is ready for using jQuery, we now bind a "click" action to all "a" element via CSS selector which will be processed by jQuery. 
  $(".subjects a").click(function() {
    // Whenever any link of above is clicked, it goes to here

    // This is a convenient method provided by jQuery to do:
    //   1. Try to make a HTTP request (AJAX) to the link (this.href = the content of the "href" attribute of the element clicked)
    //   2. Once it gets the response, put the content to div with class ".page-content"
    $(".page-content").load(this.href);

    // Return false here so that the browser will not go directly the link, but stay on the same page instead
    return false;
  });
});
</script>