Pestañas simples con HTML, CSS y JQuery
La cosa es simple, os daré los recursos y como insertar el JQuery, no tengo tiempo para más y no quiero hacer un copypaste =D HTML: <ul> <li><a hr...

La cosa es simple, os daré los recursos y como insertar el JQuery, no tengo tiempo para más y no quiero hacer un copypaste =D

HTML:
<ul>
    <li><a href="#tab1">Título de la Primera Pestaña</a></li>
    <li><a href="#tab2">Título de la Segunda Pestaña</a></li>
</ul>

<div>
    <div id="tab1">
        Contenido de la Pestaña 1
    </div>
    <div id="tab2">
       Contenido de la Pestaña 2
    </div>
</div>

Ahora queda darle estilo, el CSS(Dividido en dos partes)
CSS de las Pestañas:
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Tamaño de las pestañas--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; 
	line-height: 31px; 
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Un borde debajo para separar del contenido--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Al dar click(active) y al pasar por encima(hover) se creará el efecto, también cuando estés en esa pestaña(active)--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Dar efecto de que queda pegada a la caja sin borde(en realidad tiene, pero del color de la cajita, donde ponemos el contenido de las pestaña)--*/
}

Y el contenido:
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not
        listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with
        its content--*/
}

Ahora nos queda insertar la magia, que es el JQuery *O*
Vamos a la parte superior donde colocamos el código y ponemos esto:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
	$(".tab_content").hide();
	$("ul.tabs li:first").addClass("active").show(); 
	$(".tab_content:first").show(); 
	$("ul.tabs li").click(function() {
		$("ul.tabs li").removeClass("active"); 
		$(this).addClass("active"); 
		$(".tab_content").hide(); 
		var activeTab = $(this).find("a").attr("href"); 
		$(activeTab).fadeIn();
		return false;
	});
});</script>

Y si es MyBB
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$.noConflict();jQuery(function($){
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); 
        $(this).addClass("active"); 
        $(".tab_content").hide(); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn();
        return false;
    });
});
</script>
Es bastante fácil y queda idéntico a la imagen Smile
Tutorial hecho por Jaizu para Friki-Crew
Fuente: http://www.lawebera.es/como-hacer/ejempl...ry-css.php
Archivos Adjuntos

Oye que buen tutorial, lo voy a probar en una pagina aparte para ver que tal me anda y para ver donde le integro en mi foro.
Se me olvidaba que en MyBB el código es diferente para que no tenga problemas con prototype C=
$.noConflict();jQuery(function($){
    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show(); 
    $(".tab_content:first").show(); 
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); 
        $(this).addClass("active"); 
        $(".tab_content").hide(); 
        var activeTab = $(this).find("a").attr("href"); 
        $(activeTab).fadeIn();
        return false;
    });
});

Edito: Por cierto, gracias Gypaete por arreglar el code
Jaizu no tendrás un demo por allí?. Saludos
No, pero queda igual que la imagen, lo estoy haciendo en el diseño(Perfil) de mi Foro de Anime C=
Pero link secret xD
Colaboradores
ZioGuE Xpress
This forum uses Lukasz Tkacz MyBB addons.