SoporteMyBB tiene ya 1488 temas de soporte resueltos, de un total de 2324. 28 todavía están por resolver y 808 han quedado obsoletos.
Google+ Página en Tuenti de SoporteMyBB Perfil en Twitter de SoporteMyBB Perfil en Myspace de SoporteMyBB
SoporteMyBB / Personalización y configuración de los foros MyBB / Tutoriales / Guías v
/ [Tutorial] Pestañas simples con HTML, CSS y JQuery

[Tutorial] Pestañas simples con HTML, CSS y JQuery
Usuario(s) navegando en este tema: 1 invitado(s)
 
Calificación:
  • 1 votos - 5 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Enviar respuesta 

Jaizuv
@DepresivoOFF
Miembros

Sin conexión Spain Hombre
Temas: 60
Mensajes: 499
Reputación: 32
Registro en: Dec 2010
04-03-2012 02:58 PM
(Este mensaje fue modificado por última vez en: 05-03-2012 10:22 PM por Jaizu.)
Regístrate en SoporteMyBB para eliminar este anuncio
[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 Sonrisa
Tutorial hecho por Jaizu para Friki-Crew
Fuente: http://www.lawebera.es/como-hacer/ejempl...ry-css.php
Firma de Jaizu
¡Pásate por mi Foro! http://omnes-tecno.multiloads.com
Cita este mensaje en tu respuesta
1
Gypaete_kv
www.redmangani.me
Miembros

Sin conexión Colombia Oculto
Temas: 23
Mensajes: 1,177
Reputación: 89
Registro en: Nov 2010
04-03-2012 11:12 PM
No has editado lo que te dejé yo.

¡Buen tuto!
Firma de Gypaete_k
KuroSen!
Cita este mensaje en tu respuesta
0
Jaizuv
@DepresivoOFF
Miembros

Sin conexión Spain Hombre
Temas: 60
Mensajes: 499
Reputación: 32
Registro en: Dec 2010
05-03-2012 10:22 PM
Lo hice en MyBB-Es y aquí no
Editado xD
Firma de Jaizu
¡Pásate por mi Foro! http://omnes-tecno.multiloads.com
Cita este mensaje en tu respuesta
0
light21v
Miembro novato
Miembros

Sin conexión Honduras Hombre
Temas: 6
Mensajes: 33
Reputación: 0
Registro en: Mar 2011
20-06-2012 08:13 PM
excelente tuto gracias me va a servir mucho en un proyecto Gran sonrisa +1
Cita este mensaje en tu respuesta
0

Enviar respuesta 

Posibles temas similares...
Tema: Autor Respuestas: Vistas: Último mensaje
Estrella [1.4.x/1.6.x] [Tutorial] Añadir pestañas en el portal, perfiles, etc nentab 73 8,571 01-12-2012 05:18 PM
Último mensaje: nentab
  [Tutorial] Poner pestañas en el perfil al estilo vBulletin Mejorado MrDarkWood 9 1,780 11-09-2012 06:36 PM
Último mensaje: deaker
  [1.4.x/1.6.x] [Tutorial] Poner pestañas en el perfil al estilo vBulletin nocktis21 59 7,439 07-09-2012 08:36 PM
Último mensaje: Dark Neo
  [1.4.x/1.6.x] [Tutorial] Caja de buscar Sliding con jQuery Bour Elvan 32 3,120 08-02-2012 09:39 AM
Último mensaje: Poizonus
  [1.4.x/1.6.x] [Tutorial] Borrar comentarios HTML en plantillas Night~ 9 1,161 03-07-2011 09:47 PM
Último mensaje: Gypaete_k

Salto de foro:


Términos y condiciones | Donar | Contáctanos | SoporteMyBB | Volver arriba | Volver al contenido | Versión móvil | Sindicación RSS