Question

ok so in order here is my code

/* index.html */

<!-- jQuery Scripts -->
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js"></script>  
    <script type="text/javascript" src="http://tdr.host22.com/scripts/li.js"></script>
    <link href="http://tdr.host22.com/scripts/tdr.css" rel="stylesheet" type="text/css">
    <!-- Div Layout -->
    <div id="container">
     <div id="dp">my DP here</div>
     <div id="hrefs">
      <ul id="menu">
        <li><a id="home">Home</a></li>
        <li><a id="about">About Me</a></li>
        <li><a id="shop">My Shop / Wishlist</a></li>
        <li><a id="friend">My Friends</a></li>
        <li><a id="vids">Wicked Videos</a></li>
        <li><a id="music">Music Playlist</a></li>
        <li><a id="pics">My Pictures</a></li>
        <li><a id="ranks">My Rankings</a></li>
        <li><a id="stuff">Random Stuff</a></li>
        <li><a id="read">Read Messages</a></li>
        <li><a id="leave">Leave a Message</a></li>
      </ul>
     </div>
     <div id="content">
     TDR Content
      <div id="loading">  
       <img src="images/loading.gif" alt="Loading..." />  
      </div>
     </div>
    </div>

/* li.js */

$(document).ready(function(){
 //References
 var sections = $("#menu a");
 var loading = $("#loading");
 var content = $("#content");

 //Manage click events
 sections.click(function(){
  //show the loading bar
  showLoading();
  //load selected section
  switch(this.id){
   case "home":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #home_section", hideLoading);
    content.slideDown();
    break;
   case "about":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #aboutme_panel", hideLoading);
    content.slideDown();
    break;
   case "shop":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #shop_section", hideLoading);
    content.slideDown();
    break;
   case "friend":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #friend_section", hideLoading);
    content.slideDown();
    break;
   case "vids":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #vids_section", hideLoading);
    content.slideDown();
    break;
   case "music":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #music_section", hideLoading);
    content.slideDown();
    break;
   case "pics":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #pics_section", hideLoading);
    content.slideDown();
    break;
   case "ranks":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #ranks_section", hideLoading);
    content.slideDown();
    break;
   case "stuff":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #stuff_section", hideLoading);
    content.slideDown();
    break;
   case "read":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #read_section", hideLoading);
    content.slideDown();
    break;
   case "leave":
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #leave_section", hideLoading);
    content.slideDown();
    break;
   default:
    //hide loading bar if there is no selected section
    hideLoading();
    break;
  }
 });

 //show loading bar
 function showLoading(){
  loading
   .css({visibility:"visible"})
   .css({opacity:"1"})
   .css({display:"block"})
  ;
 }
 //hide loading bar
 function hideLoading(){
  loading.fadeTo(1000, 0);
 };
});

/* sections.html */

<div id="home_section">
Home haha
</div>
<!-- About Us -->
<div id="about_section">  
<script type='text/javascript'><!--
imvu_avatar_name = "TheDarkRaver";
imvu_panel_name = "aboutme_panel";
imvu_section_name = "mp_left";
imvu_panel_width = 590;
imvu_panel_height = 459;
//--></script>
</div>

/* tdr.css */

@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border: 0pt none;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0pt;
padding: 0pt;
vertical-align: baseline;
}
/*Removing Bullets*/
#menu {
  padding:0;
  margin:0;
  width:0;
}
#menu li { 
list-style-type:none; 
display: inline;
} 
/*Menu Link Style */
#menu a, #menu a:visited {
  position:relative; /* ADDED */
  display:block;
  width:9em;
  cursor: crosshair;
  border:1px solid orange;
  font-family:cursive, sans-serif;
  font-size:0.7em;
  text-align:center;
  text-decoration:none;
  background:transparent;
  color:orange;
  padding:0.25em;
}
#menu a:hover {
 color:red;
 border:1px solid red;
}
#container {
 position:relative;
 width: 700px;
 height:400px;
 background-color: transparent;
 border: 1px;
 border-color:orange;
 border-style: dotted;
 margin: 0pt auto;
}
#hrefs {
 width:0px;
}
#content {
 position: absolute;
 top:0px;
 left:9.8em;
 width:580px;
 height:100%;
 border:1px solid #0066CC;
 background-color:transparent;
 background-image:  url("../images/cont.png");
 background-repeat: repeat;
 overflow: auto;
 color: #000000;
 line-height: 1.3em;
 font-size: 12px;
}
#dp {
 position:absolute;
 bottom:0px;
 left:0px;
}
#loading{  
     text-align: center;  
     visibility: hidden;  
}  
.clear{
 clear: both;
 height: 0;
 visibility: hidden;
 display: block;
}

Answer 1

Like Nick said, you probably aren’t including jQuery, are there any errors in Firebug or anything like that?

Also, you might want to consider replacing most of your huge switch with something more like:

content.slideUp();
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
content.slideDown();

Edit:
To be more clear about this last part, first go into your markup and change:

<li><a id="about">About Me</a></li>

into

<li><a id="aboutme">About Me</a></li>

This is because in your javascript you’re showing a section called ‘aboutme’… best to just keep the names matching…. then delete your entire switch and replace it with:

content.slideUp();
content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
content.slideDown();

So the entire javascript portion of your code becomes (with some other improvements):

$(document).ready( function() {
  var sections = $("#menu a");
  var loading = $("#loading");
  var content = $("#content");

  function showLoading() {
    loading.css( {
      visibility: 'visible',
      opacity: 1,
      display: 'block'
    } );
  }

  function hideLoading(){
    loading.fadeTo(1000, 0);
  }

  sections.click( function() {
    showLoading();
    content.slideUp();
    content.load("http://tdr.host22.com/sections.html #" + this.id + "_section", hideLoading);
    content.slideDown();
  } );
} );

As you can see, this code doesn’t even need comments because it’s so short and concise.

Also, reading through this, it seems you almost certainly have other problems… The animations wont happen the way you expect, slideUp is asynchronous meaning that it will start sliding up and then immediately load, you probably don’t want this behavior so look into jQuery’s method of chaining animations (via callbacks, see the docs for slideUp, for example), or take a look at jQuery 1.4’s delay method.