Tutoriales en la Web

body {
	background-image:url(../imagenes/fondo.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	background-color:#657077;
	margin:40px;
}
 
#tabbed_box_1 {
	margin: 0px auto 0px auto;
	width:300px;
}
.tabbed_box h4 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:23px;
	color:#ffffff;
	letter-spacing:-1px;
	margin-bottom:10px;
}
.tabbed_box h4 small {
	color:#e3e9ec;
	font-weight:normal;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	position:relative;
	top:-4px;
	left:6px;
	letter-spacing:0px;
}
.tabbed_area {
	border:1px solid #494e52;
	background-color:#636d76;
	padding:8px;
}
 
ul.tabs {
	margin:0px; padding:0px;
	margin-top:5px;
	margin-bottom:6px;
}
ul.tabs li {
	list-style:none;
	display:inline;
}
ul.tabs li a {
	background-color:#464c54;
	color:#ffebb5;
	padding:8px 14px 8px 14px;
	text-decoration:none;
	font-size:9px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-weight:bold;
	text-transform:uppercase;
	border:1px solid #464c54;
}
ul.tabs li a:hover {
	background-color:#2f343a;
	border-color:#2f343a;
}
ul.tabs li a.active {
	background-color:#ffffff;
	color:#282e32;
	border:1px solid #464c54;
	border-bottom: 1px solid #ffffff;
}
.content {
	background-color:#ffffff;
	padding:10px;
	border:1px solid #464c54;
	font-family:Arial, Helvetica, sans-serif;
	background-image:url(../imagenes/abajo.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
}
#content_2, #content_3 { display:none; }
 
.content ul {
	margin:0px;
	padding:0px 20px 0px 20px;
}
.content ul li {
	list-style:none;
	border-bottom:1px solid #d6dde0;
	padding-top:15px;
	padding-bottom:15px;
	font-size:13px;
}
.content ul li:last-child {
	border-bottom:none;
}
.content ul li a {
	text-decoration:none;
	color:#3e4346;
}
.content ul li a small {
	color:#8b959c;
	font-size:9px;
	text-transform:uppercase;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	position:relative;
	left:4px;
	top:0px;
}
.content ul li a:hover {
	color:#a59c83;
}
.content ul li a:hover small {
	color:#baae8e;
}

<link rel="stylesheet" href="css/tabladinamica.css" type="text/css" media="screen">
 
    <script src="js/jquery-1.js"></script>
    <script>
 
	  // When the document loads do everything inside here ...
	  $(document).ready(function(){
 
		// When a link is clicked
		$("a.tab").click(function () {
 
			// switch all tabs off
			$(".active").removeClass("active");
 
			// switch this tab on
			$(this).addClass("active");
 
			// slide all content up
			$(".content").slideUp();
 
			// slide this content up
			var content_show = $(this).attr("title");
			$("#"+content_show).slideDown();
 
		});
 
	  });
  </script>

<div id="tabbed_box_1" class="tabbed_box">
	<h4>Tabla en JQuery<small>Seleccione pestaÑ;A</small></h4>
<div class="tabbed_area">
 
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab">TEMAS</a>
            </li>
            <li><a href="#" title="content_2" class="tab active">ARCHIVOS</a></li>
            <li><a href="#" title="content_3" class="tab">PÁ;GINAS</a></li>
    </ul>
 
        <div style="display: none;" id="content_1" class="content">
        	<ul>
            	<li><a href="">Tema 1 <small>4 Posts</small></a></li>
            	<li><a href="">Tema 2 <small>32 Posts</small></a></li>
            	<li><a href="">Tema 3 <small>2 Posts</small></a></li>
            	<li><a href="">Tema 4 <small>19 Posts</small></a></li>
            	<li><a href="">Tema 5 <small>6 Posts</small></a></li>
            	<li><a href="">Tema 6 <small>8 Posts</small></a></li>
			</ul>
        </div>
        <div style="display: block;" id="content_2" class="content">
        	<ul>
            	<li><a href="">Archivo 1 <small>6 Posts</small></a></li>
            	<li><a href="">Archivo 2<small>4 Posts</small></a></li>
            	<li><a href="">Archivo 3<small>22 Posts</small></a></li>
            	<li><a href="">Archivo 4<small>12 Posts</small></a></li>
            	<li><a href="">Archivo 5<small>3 Posts</small></a></li>
            	<li><a href="">Archivo 6<small>1 Posts</small></a></li>
			</ul>
    </div>
<div style="display: none;" id="content_3" class="content">
        	<ul>
            	<li><a href="http://www.tutorialesenlaweb.com">Tutoriales en la web</a></li>
            	<li><a href="http://www.tutorialesenlaweb.com">Tutoriales en la web</a></li>
            	<li><a href="http://www.tutorialesenlaweb.com">Tutoriales en la web</a></li>
            	<li><a href="http://www.tutorialesenlaweb.com">Tutoriales en la web</a></li>
			</ul>
        </div>
 
    </div>
 
</div>