Este artículo describe el método para implementar el menú de navegación de conmutación de opciones múltiples por JS. Compártelo para su referencia. El método de implementación específico es el siguiente:
La copia del código es la siguiente:
<html>
<Evista>
<meta http-oquiv = "content-type" content = "text/html; charset = gb2312">
<title> Menú de navegación de alternar múltiples opciones </title>
</ablo>
<style type = "text/css">
#dnavbar {
Color de fondo: #ffffff;
}
#dnavbar li {
Tipo de estilo de lista: Ninguno;
flotante: izquierda;
Ancho: 84px;
Altura: 28px;
Línea de altura: 28px;
tamaño de fuente: 12px;
Color: #ffffff;
borde: 1px sólido #ffffff;
Antecedentes:#86C2FF;
Text-Align: Center;
Pantalla: bloque;
cursor: puntero;
}
#submenu {
Antecedentes:#99CC66;
Ancho: 500px;
Border-izquierda: 1px Solid #FFFFFFF;
Border-Right: 1px Solid #FFFFFFF;
Altura: 29px;
Línea de altura: 29px;
Color: #ffffff;
tamaño de fuente: 12px;
ROLDE-LEFT: 10px;
}
cuerpo {
margen: 0px;
}
a: enlace, a: visitado {
Color: #ffffff;
Decoración de texto: ninguna;
}
A: Hover {
Color: #ffffff;
Decoración de texto: ninguna;
}
</style>
<script language = "javaScript">
función showmenu ()
{
var Barctt = document.getElementByIdx_x ("dnavbar")
var liarr = Barctt.getElementsBytagName_r ("Li")
enlaces var = new Array ()
enlaces [0] = "<a href = '#'> Ubicación actual: página de inicio"
enlaces [1] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a> | <a href = '#'> Proyecto 3 </a> | <a href = '#'> Proyecto 4 </a>"
enlaces [2] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a> | <a href = '#'> Proyecto 3 </a>"
enlaces [3] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a> | <a href = '#'> Proyecto 3 </a> | <a href = '#'> Proyecto 4 </a> | <a href = '#'> Proyecto 5 </a>"
enlaces [4] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a>"
enlaces [5] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a> | <a href = '#'> Proyecto 3 </a>"
enlaces [6] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a>"
enlaces [7] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a>"
enlaces [8] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a>"
enlaces [9] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a>"
enlaces [10] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a>"
enlaces [11] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a>"
enlaces [12] = "<a href = '#'> Proyecto 1 </a> | <a href = '#'> Proyecto 2 </a>"
para (i = 0; i <liarr.length; i ++)
{
Liarr [i] .onclick = function ()
{
seleccionar este (this, liarr, enlaces)
}
}
}
función seleccionar (indexobj, allli, infoarr)
{
índice var = 0;
para (i = 0; i <allli.length; i ++)
{
allli [i] .style.border = "1px sólido #ffffff";
allli [i] .style.backgroundcolor = "#86c2ff";
allli [i] .style.height = "28px";
if (indexobj == allli [i])
{
índice = i;
}
}
indexobj.style.borderbottom = "0px sólido #666688";
indexobj.style.backgroundcolor = "#99cc66";
indexobj.style.height = "31px";
document.getElementByIdx_x ("submenu"). innerhtml = infoarr [index];
}
</script>
<Body onload = "showmenu ()">
<div id = "dnavbar" style = "float: none; ancho: 560px;"> <li> home </li> <li> Entertainment Express </li> <li> Music World </li> <li> Flash </li>
</div>
<div id = "submenu"> Anuncio de asuntos del sitio </div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.