Este artigo descreve o método de implementação do menu de navegação de comutação de várias opções por JS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
A cópia do código é a seguinte:
<html>
<head>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
<title> Múltiplo de navegação de opções múltiplas </title>
</head>
<style type = "text/css">
#dnavbar {
Background-Color: #ffffff;
}
#dnavbar li {
Tipo no estilo de lista: nenhum;
flutuar: esquerda;
Largura: 84px;
Altura: 28px;
altura de linha: 28px;
tamanho de fonte: 12px;
Cor: #ffffff;
Border: 1px Solid #ffffff;
Antecedentes:#86C2FF;
Alinhamento de texto: centro;
exibição: bloco;
Cursor: Ponteiro;
}
#submenu {
Antecedentes:#99CC66;
Largura: 500px;
Border-Ift: 1px sólido #ffffff;
Fronteira: 1px sólido #ffffff;
Altura: 29px;
altura da linha: 29px;
Cor: #ffffff;
tamanho de fonte: 12px;
preenchimento-esquerda: 10px;
}
corpo {
margem: 0px;
}
A: Link, a: visitado {
Cor: #ffffff;
Decoração de texto: Nenhum;
}
A: Hover {
Cor: #ffffff;
Decoração de texto: Nenhum;
}
</style>
<Script Language = "JavaScript">
função showmenu ()
{
var barctt = document.getElementbyidx_x ("dnavbar")
var Liarr = Barctt.getElementsByTagname_r ("Li")
var links = new Array ()
Links [0] = "<a href = '#'> Localização atual: página inicial"
links [1] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a> | <a href = '#'> Projeto 3 </a> | <a href = '#' '> Projeto 4 </a>"
links [2] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a> | <a href = '#'> Projeto 3 </a>"
links [3] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a> | <a href = '#'> Projeto 3 </a> | <a href = '#'#'> Projeto 4 </a> | <a href ='#'> Projeto 5 </a>"
links [4] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a>"
links [5] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a> | <a href = '#'> Projeto 3 </a>"
links [6] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a>"
links [7] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a>"
links [8] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a>"
links [9] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a>"
links [10] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a>"
links [11] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a>"
links [12] = "<a href = '#'> Projeto 1 </a> | <a href = '#'> Projeto 2 </a>"
para (i = 0; i <Liarr.Length; i ++)
{
LIARR [i] .OnClick = function ()
{
Selecione este (este LIarr, links)
}
}
}
Função SelecioneThis (indexobj, Allli, Infoarr)
{
var índice = 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 Solid #6666688";
indexobj.style.backgroundcolor = "#99cc66";
indexobj.style.Height = "31px";
document.getElementByidx_x ("submenu"). innerhtml = infoarr [index];
}
</script>
<corpo onload = "showmenu ()">
<div id = "dnavbar" style = "float: Nenhum; largura: 560px;"> <li> Home </li> <li> Entertainment Express </li> <li> MUSIC WORLD </li> <li> Flash </li>
</div>
<div id = "submenu"> anúncio de assuntos do site </div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.