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> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</div>
I am sorry if my code is sloppy, I just quickly slapped it on the editor here.
Thanks.
