HTML list selection <li> calling php applications - php

Question

facing a bit of a difficult area in my first page itself (index.php), these are the things that I hope to have. I assume these can be solved with HTML.
I hope to have the menu listing on the left, and when selected, should be able to call other php programs, which will be displayed on the right.
The selected item from the list on the left should be made bold.
The default page should be “home” (the first on selection list).
I have given below the code that I came up with but it doesnt work the way I like it to work.
Part of index.php
<table id="structure">
<tr>
<td id="navigation">
<ul class = subjects>
<li>Home</li>
<li>Pet Listing</li>
<li>Galary</li>
<li>Clubs</li>
<li>Member area</li>
<li>Contact us</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>
Part of the CSS is as below
#navigation { width: 150px; padding: 1em 2em; color: #D4E6F4; background: #8D0D19; }
#navigation a { color: #D4E6F4; text-decoration: none; }
ul.subjects { padding-left: 0; list-style: none; }
ul.pages { padding-left: 2em; list-style: square; }
.selected { font-weight: bold; }

Answer 1

jQuery has a very convenient method $(element).load() for you to load HTML and insert into the element that you specified.
Example usage:
<table id="structure">
<tr>
<td id="navigation">
<ul class ="subjects">
<li>Home</li>
<li>Pet Listing</li>
<li>Galary</li>
<li>Clubs</li>
<li>Member area</li>
<li>Contact us</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>
Note: Please avoid using table to layout your page. Try to use CSS + div - a better way to layout :D