PHP,CSS,JQUERY,HTML tips for beginners

Script:

<script type="text/javascript">
$().ready(function() {
  
  $('.unique_id').click(function(e){
    var segment =  $(this).attr('segment');
       $('.content_text').hide();

    $.ajax({
      url: segment+".html",
      dataType:  "text",
      success: function(data){
          $('.content_text').html(data);
       eval($(data).filter('script'));
       $('.content_text').fadeIn('slow');       
      }
    });
      e.preventDefault();
  }); 
 });
 var $VisualLightBoxParams$ = {autoPlay:true,borderSize:21,enableSlideshow:true,overlayOpacity:0.4,startZoom:true};
 
</script>

we can apply the class named unique_id in any div. Such as example

<div id="navcontainer">
       <ul id="navlist">
         <li id="active"><a href="index.html" class="panel_text">Home</a></li>
         <li class="green"><a href="#"  class="unique_id panel_text" segment="convention-program">Convention Program</a></li>
         <li> <a href="spech_of_delegates.html" class="panel_text unique_id"  segment="spech_of_delegates">Speech of all delegates.</a></li>
         <li><a href="#" class="panel_text unique_id"  segment="elected_ executive_body_ of_ ieb">Elected Executive body of IEB</a></li>
         <li><a href="time_series_list.html" class="unique_id panel_text" segment="time_series_list" >Time-series list of Presidents </a></li>
         <li><a href="agm_reports.html" class="unique_id panel_text" segment="agm_reports" >AGM Reports</a></li>
         <li><a href="#" class="panel_text">Memorial Lectures</a></li>
         <li><a href="bye-laws.html" class="unique_id panel_text" segment="bye-laws" >IEB Constitution/Bye-laws.</a></li>
         <li><a href="#" class="panel_text">Prof. Institutions's Introduction</a></li>
         <li><a href="#" class="panel_text">Member Database</a> </li>
         <li><a href="#" class="panel_text">Fellow Database</a> </li>
         <li><a href="#" class="panel_text">IEB welfare scheme  </a></li>
         <li> <a href="#" class="panel_text">IEB Publications </a></li>
         <li> <a href="gallery.html" class="unique_id panel_text" segment="gallery" >Photo Gallery  </a></li>
         <li> <a href="gallery.html" class="unique_id panel_text" segment="Advertisements of the Sponsors." >Advertisements of the Sponsors.  </a></li>
       </ul>
        </div>
      

The sub page : its depends on content_text class.


<div class="content_text">
<h1> Bye-laws</h1>
<p class="content_text_shape">

<iframe src="Binder1.pdf" style="width:600px; height:500px;" frameborder="0"></iframe>



</p>
</div>

<div style="clear:both;"></div>
</div>