Cómo implementar contenido de cambio de pestañas html

Método de cambio de contenido entre pestañas HTML:

Herramientas/materias primas

Editor de páginas web Dreamweaver

Métodos getElementById y getElementsByTagName en javascript

Pasos de operación:

1. La sección formada por tres DIV solo mostrará el contenido del tercer automóvil.

2. Proceso de producción

1. Crear el marco estructural HTML

2. Completar la entrada del CSS correspondiente para formar un diseño específico para la página; !DOCTYPE?htmlgt ;?

lt;html?lang="es"gt;?

lt;headgt;?lt;meta?charset="UTF-8"gt; ?lt;titlegt ;cambio de pestañalt;/titlegt;?lt;style?type="text/css"gt;?botón?{?ancho: 120px;?alto:?32px;?alto de línea:?32px;?fondo -color: ?#ccc;? tamaño de fuente: ?24px;? }? div?{? pantalla:?none;? ancho: 200px;?verde;?borde:1px?sólido;?} ?lt;/stylegt;?

lt;/headgt;?

lt;bodygt; lt;button?style="fondo-color:?amarillo;"gt;1lt; /buttongt;?lt;buttongt;2lt;/buttongt;?lt;buttongt;3lt;/buttongt;?lt;buttongt;4lt;/ buttongt;?lt;div?style="display:block;"gt;1lt; /divgt;?lt;divgt;2lt;/divgt;?lt;divgt;3lt;/divgt;?lt;divgt;4lt;/ divgt;?script?type="text/javascript"gt;? buttonArr?=?document.getElementsByTagName("botón");? var?divArr?=?document.getElementsByTagName("div");? para (var?i?=?0;?i?lt;?buttonArr.length; i )?{? buttonArr[i].index?=?i;? //buttonArr[i].setAttribute("índice", i);? buttonArr[i].onclick?=?function()?{? for(var?j?=?0;?j?lt;?buttonArr.length;?j)?{? buttonArr[j].estilo.fondoColor?=?"#ccc";? style.backgroundColor?=?"amarillo";? divArr[j].style.display?=?"none";? divArr[this.index].style.display?=?"bloque";? ?lt;/scriptgt;?

lt;/bodygt;?

lt;/htmlgt ;

p>

3. Ingrese el código javascript y registre los eventos correspondientes para los encabezados de las pestañas

lt;html?lang="es"gt;?

lt;headgt;?lt;meta?charset="UTF-8"gt;?lt;titlegt;tablt;/titlegt;?lt;style?type="text/css"gt;? : 0; margen: 0;} botón? { color de fondo: #ccc; ancho: 80px; alto: 30px; .btn-active?{ color de fondo: ?amarillo;? : ?14px; }? div{? ancho: 200px;? pantalla: ?ninguno;?

lt;/headgt;?

lt;bodygt;?lt;button?class="btn-active"gt;button1lt;/buttongt;?lt;buttongt;button2lt; /buttongt;?lt;buttongt;button3lt; /buttongt;?lt;buttongt;boton 4lt;/buttongt;?lt;div?class="div-active"gt;1lt;/divgt;?lt;divgt; ;4lt;/divgt;?lt;script?type="text/javascript"gt;? //1. ¿Obtener los elementos primero? var?buttonList?=?document.getElementsByTagName("button") ;? =?document.getElementsByTagName("div");? //2. ¿Agregar evento? for(var?i?=?0;?i?lt;?buttonList.length;?i )?{? índice?=?i;? lista de botones[i].onclick?=?función()?{? para(var?j?=?0;?j?lt;?lista de botones.longitud;j) ?{? ].className?=?"";? divList[j].className?=?"";? }? this.className?=?"btn-active";? div-active";? }? }?lt;/scriptgt;?

lt;/bodygt;?

lt;/htmlgt;

4. Código completo: lt

;!DOCTYPE?htmlgt;lt;htmlgt;lt;head?lang="es"gt;

lt;meta?charset="UTF-8"gt;

lt; titlegt;?tablt;/titlegt;

lt;style?type="text/css"gt; /*?Producción de estilo CSS?*/? *{padding: 0px;?margin: 0px ;} a{?text-decoration:none;?color:black;} a:hover{text-decoration:none;?color:#336699;}

#tab{width: 270px;?padding : 5px ; altura: 150px; margen: 20px; }

#tab?ul{estilo de lista: ninguno; pantalla:; altura de línea: 30px; C88?solid;}

#tab?ul?li{fondo: #FFF; cursor: puntero; flotante: izquierda; estilo de lista: ninguno?altura: 29px;?altura de línea: 29px; relleno :0px?10px;?margin:0px?10px;?border:1px?solid?#BBB;?border-bottom:2px?solid?#C88;}

#tab?ul?li .on {border-top: 2px?solid?Saddlebrown;?border-bottom: 2px?solid?#FFF;}

#tab?div{alto: 100px ancho: 250px;?line-height :24px; ; borde superior: ninguno; ?padding: 1px; ?border: 1px?solid?#336699; relleno: 10px;}

.hide{display: none;}

lt ;/stylegt;

lt;script?type="text/javascript"gt;

//?JS implementa el cambio de pestañas

onload?= ?function(){

var?myTab?=?document.getElementById("tab"); //El div completo

var?myUl?=?myTab.getElementsByTagName (" ul")[0]; //Un nodo

var?myLi?=?myUl.getElementsByTagName("li"); //Array

var?myDiv?= ?myTab .getElementsByTagName("div");?//array

for(var?i?=?0;?ilt;myLi.length;i){

myLi[ i] .index?=?i;

myLi[i].onclick?=?function(){

for(var?j?=?0;?j?lt ;? myLi.length;?j ){

myLi[j].className="apagado

";

myDiv[j].className?=?"hide";

}

this.className?=?"on";

myDiv[this.index].className?=?"show";

} }

}

lt;/scriptgt;lt; /headgt;lt;bodygt;lt;!--?Diseño de página HTML?--gt;lt;div?id?=?"tab"gt;

lt;ulgt;

lt;li?class="off"gt;bienes raíceslt;/ligt;

lt;li?class="on"gt;homelt;/ligt;

lt ；li?class="off"gt;Vivienda de segunda manolt;/ligt;

lt;/ulgt;

lt;div?id="firstPage"?class=" hide"gt;

lt;a?href?=?"#"gt;Alternar código tablt;/agt;lt;br/gt;

lt;a?href? =?"#"gt;Código de cambio tablt;/agt;lt;br/gt;

lt;a?href?=?"#"gt;Código de cambio tab/agt;lt;br/ gt;

lt;a?href?=?"#"gt;Código de cambio tablt;/agt;lt;br/gt;

lt;/divgt;

lt;div?id=" secondPage"?class="show"gt;

lt;a?href?=?"#"gt;Cambiar código tablt;/agt;lt; br/gt;

lt;a?href?=?"#"gt;Código de cambio tablt;/agt;lt;br/gt;

lt;a?href? =?"#"gt;Código de cambio tablt;/agt;lt;br/gt;

lt;a?href?=?"#"gt;Código de cambio tablt;/agt;lt;br /gt;

lt;/divgt;

lt;div?id="tercera página"?class?=?"hide"gt;

lt; a?href?=?"#"gt;Código de cambio tablt;/agt;lt;br/gt;

lt;a?href?=?"#"gt;Código de cambio tablt;/agt ;lt;br/gt;

lt;a?href?=?"#"gt;Cambiar tabla de códigoslt;/agt;lt;br/gt;

lt;a ?href?=?"#"gt;Cambiar código tablt;/agt;lt;br/gt;

lt;/divgt;lt;/divgt;lt;/bodygt;lt;/htmlgt;