I am creating a library (personal project) and for some odd reason I can not connect the navigation to the content. When I click on the tabs of the navigation, the content remains the same. how do I connect the content to the navigation, the content should be changing everytime you click a new tab.

This is the css:

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
/* HTML ELEMENTS */
body {
    background-color:#fff;
    font: 14px Lucida Grande, serif;
}
h1 {
    font: bold 65px/60px Helvetica, Arial, Sans-serif;
    text-align: center;
    color: #666;
    text-shadow: 0px 2px 6px #333;
}
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a:hover { color: #fc0; }
a { outline:none; }
/* COMMON CLASSES */
.break { clear:both; }
/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }
/* CONTENT */
#content { }
#content p { margin:20px; }
/* MENU */
#menu { margin:40px 0 0 0px; }
#menu ul { list-style:none; }
#menu ul li { display:inline; float:left; margin-bottom:4px; }
/* :first-child pseudo selector with rounded top left corner */
#menu ul li:first-child a { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius:4px; }
/* :last-child pseudo selector with rounded top right corner */
#menu ul li:last-child a { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius:4px; }
/* background color set to RGBA, with opacity on 0.3 and also using text-shadow */
#menu ul li a { font: "Lucida Grande", "Lucida Sans Unicode", sans-serif; padding:4px; background: #eee; text-decoration: none; font: bold 12px 2px/18px letter-spacing: -1px; color: #666;
    text-shadow: #eee 0px 0px 2px; }
/* hover state shows a linear gradient and opacity it brought down to 0.9 and also shows a very slight grey gradient on top */
#menu ul li a:hover {
    background-color:#333 !important;
    color: #C2BFDE !important;
}

/* another RGBA background, now with an opacity of 0.8 */
#menu ul li a.active {
    /* [disabled]background: #fff !important; */
    background-color: #333;
    color: #C2BFDE;
}
/* main contents with RGBA background (same colour as active tab) and three rounded corners */
#main {
    clear:both;
    /* [disabled]background: rgba(255,138,30,0.8); */
    width:1000px;
    margin-left:0px;
    margin-right: 0px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-bottomleft: 4px;
    -webkit-border-top-right-radius:4px;
    -webkit-border-bottom-right-radius:4px;
    -webkit-border-bottom-left-radius:4px;
    background-color: #fff;
    border: solid thin #ccc;

    padding-left: 0 auto;
    padding-right: 0 auto;
}   
/* header with a text-shadow */
#main h3 {
    text-transform:uppercase;
    padding:20px 0 0 20px;
    color:#666;
    text-shadow: #000 0px 0px 2px;
}
#main p {
    padding-bottom:4px;
    color:#fff;
}
a:link {
    color:#3CF;
}      /* unvisited link */
a:visited {color:#3cf;}  /* visited link */
a:hover {color:#3cf;}  /* mouse over link */
a:active {color:#3cf;}  /* selected link */




/*table*/
table, td, th
{
    border:1px solid #CCC;
    border-style:thin;
    border-width:1px;
    width: 950px;
}
th
{
    background-color:#eee;
    color:#333;
    font: 10px;
}

The HTML:

<div id="wrapper">
    <h1>Code Library<small></small></h1>
    <div id="content">
      <div id="menu">
            <ul>
                <li><a href="#" title="1">1</a></li>
                <li><a href="#" title="2" class="active">2</a></li>
                <li><a href="#" title="3">3</a></li>
                <li><a href="#" title="4">4</a></li>
                <li><a href="#" title="5">5</a></li>
            </ul>
        </div>
        <div id="main">
        <table width="988" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <th scope="col" style="width: 9%">1</th>
    <th scope="col" style="width: 22%">2</th>
    <th scope="col" style="width: 15%">3</th>
    <th scope="col" style="width: 15%">4</th>
    <th scope="col" style="width: 12%">5</th>
  </tr>
  <tr>
    <td>1</td>
    <td>Hello World</td>
    <td>



<a href="#">View Source Code</a>  </td>
    <td><a href="#">Click Here</a></td>
    <td><a href="#">Click Here</a></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
        </div>
    </div>
</div>

I am sorry if my code is sloppy, I just quickly slapped it on the editor here.

Thanks.

the content should be changing everytime you click a new tab.

Based on your code, I dont see what you mean by changing content... If you want to create tabs, have you considered looking at the tabs in jQuery UI? Easy to implement...

commented: thanks :) +7

by changing content i mean that if you click a tab, the content area changes based on the selection.

Look at this site's search (it is below), i am trying to build that kind of navigation but with tables :)
http://www.worldcat.org/

And yes, i have considered jquery. I just didn't put up the jquery code because there isn't anything wrong with it, just something wrong with the html and css.

thanks so far.

<m/> you want to change content without page refresh then easiest way is make an ajax call and replaace the div with id "content" with the new div containing the response from the requested page.you can use jquery based ajax if you are using jquery.

commented: thanks :) +7

<m/> you want to change content without page refresh then easiest way is make an ajax call and replaace the div with id "content" with the new div containing the response from the requested page.you can use jquery based ajax if you are using jquery.

how would i do that, i have never actually dealt with ajax before (or at least think i have). do you have an example or a way of fixing my code?

take a look at jquery API.It contains many example on how to call a page ,get response from it and then replace a content with the response from the selected page.
http://api.jquery.com/jQuery.ajax/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.