Navegación por pestañas Agregar clases CSS dinámicamente

Me encantan las pestañas, ¡lo he hecho desde que están aquí! Veamos si podemos aprovechar algunos javascript y CSS3 para construir una gran navegación con pestañas. Vamos a usar javascript para detectar automáticamente en qué pestaña está el visitante actualmente e incluso hacer que sea compatible con IE6. Larga vida a CSS3pie!

Paso 1: HTML

La parte facil?

Como queremos que nuestra página sea compatible con IE 6-8, usamos el doctype "HTML - 4.01 Transitional". Echemos un vistazo a la plantilla:

     archivo de prueba

Los enlaces muertos son mejores que ningún enlace!

Su editor web debe tener esta plantilla, de lo contrario, cópielo en index.php en su carpeta principal.

Tenemos tres archivos externos que crearemos o agregaremos más adelante. Como siempre ha dicho mi bisabuelo: los enlaces muertos son mejores que ningún enlace. pie.htc se vinculará desde el archivo css, por lo que solo necesitamos vincular el javascript y el archivo css.

     archivo de prueba

Paso 2: HTML

Este es el plan:

El contenedor, el encabezado y el contenido son div capas. El contenedor contiene todo y su función es evitar que el contenido se contraiga más de 800px. El encabezado es el sistema de pestañas y el contenido habla por sí mismo. El sistema de pestañas consiste en una lista desordenada que alinearemos horizontalmente. Cada elemento de la lista contiene un enlace a otra página. Con esto en mente, no es difícil encontrar el marcado:

       archivo de prueba        DSNR Inicio
Proteccion
Brainz!
 
  contenido

Esto es lo que tenemos hasta ahora:

El violín.

Tiene toda su funcionalidad, pero los clientes nunca estarán contentos con un diseño tan simple. Buenas noticias para usted?

Paso 3: CSS CSS2 solamente

Así que necesitamos un estilo básico. Cree tabs.css y colóquelo en la misma carpeta que index.php

Comenzamos por estilizar el cuerpo y el envase:

 cuerpo margen: 12px -12px; color de fondo: # 003; Familia tipográfica: Arial, "MS Trebuchet", sans-serif; tamaño de fuente: 16px; ancho: 100%;  #container width: 800px; margen izquierdo: auto; margen derecho: auto;

Ninguno de los elementos tiene nada especial, excepto el margen. El contenedor es fácil: si el margen izquierdo y el margen derecho de un elemento (con un ancho definido) se configuran en automático, cada navegador intentará centrar ese elemento.

El margen horizontal negativo del cuerpo tampoco es tan difícil. El ancho del contenedor es de 800 px para la compatibilidad con pantallas antiguas, pero vamos a agregarles esquinas redondeadas, cada una con un radio de 12 px. Esto hace que las esquinas se contraigan, así que agregamos un relleno de 12px al contenedor.

Paso 4: Resultado hasta ahora

Comprueba lo que has construido hasta ahora. Si la pantalla es demasiado pequeña (por debajo de 800px), notará que los bordes redondeados a la izquierda desaparecen. Son innecesarios, por lo que nuestro margen negativo los oculta muy bien..

Para mantener las cosas legibles, también debemos cambiar el color de fondo del contenido y las pestañas.

 #header ul background-color: # 566AAA;  #content background-color: #FFF;

Paso 5: Domready JavaScript

Antes de continuar diseñando las pestañas, queremos agregar una de las partes más importantes (y brillante, aunque yo lo digo): la pestaña seleccionada debe ser blanca. No vamos a cambiar las pestañas en cada página. Dejamos que javascript haga el trabajo sucio..

 if (document.addEventListener) document.addEventListener ("DOMContentLoaded", function () ran = 1; init (), false) else if (document.all &&! window.opera) document.write ('  archivo de prueba        DSNR Inicio
Proteccion
Brainz!
 
   contenido

tabs.css

 cuerpo margen: 12px -12px; color de fondo: # 003; Familia tipográfica: Arial, "MS Trebuchet", sans-serif; tamaño de fuente: 16px; ancho: 100%;  #container width: 800px; margen izquierdo: auto; margen derecho: auto;  #header width: 600px; margen: 0 auto; / * background-color: #FFF; * / #content background-color: #FFF; -moz-border-radius: 12px; -webkit-border-radius: 12px; radio del borde: 12px; relleno: 12px; comportamiento: url (/PIE.htc);  #header ul -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; radio del borde: 12px 12px 0 0; margen: 0; ancho: 600px; relleno: 0; color de fondo: # 566AAA; fondo: -webkit-gradient (linear, 0 0, 0 bottom, de (# 9FB6CD), a (# 003F87)); fondo: -moz-linear-gradient (# 9FB6CD, # 003F87); fondo: gradiente lineal (# 9FB6CD, # 003F87); -pie-background: gradiente lineal (# 9FB6CD, # 003F87); tipo de estilo de lista: ninguno; comportamiento: url (/PIE.htc); desbordamiento: visible;  #header ul li margin: 0; relleno: 0; pantalla: bloque en línea; ancho: 33,3%; / * Personaliza esto !!! * / text-align: center; zoom: 1; * pantalla: en línea;  #header ul li a text-decoration: none; color: # 005; font-weight: negrita; ancho: 100%; altura: 100%; bloqueo de pantalla; relleno: 12px 0; text-shadow: 0 1px 1px #AAA; comportamiento: url (/PIE.htc);  .selected comportamiento: url (/PIE.htc); cuadro de sombra: 0 -3px 3px -1px # 222; -moz-border-radius: 12px 12px 0 0; -webkit-border-radius: 12px; radio del borde: 12px 12px 0 0; color de fondo: #FFF;

tabs.js

 if (document.addEventListener) document.addEventListener ("DOMContentLoaded", function () ran = 1; init (), false) else if (document.all &&! window.opera) document.write (''

Diseño web