This forum uses cookies

This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

MangoVirtual - Alojamiento Web

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...
[Imagen: demoview.jpg]
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:
Código:
<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:
Código:
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:
Código:
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:
Código:
<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
Código:
<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
[Imagen: http://i.imgur.com/kLUbBrj.png]
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=
Código PHP:
$.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
[Imagen: http://i.imgur.com/kLUbBrj.png]
Jaizu no tendrás un demo por allí?. Saludos