Este artigo descreve o método de implementação da guia JS. Compartilhe para sua referência. A análise específica é a seguinte:
1. Ideias
1. Obtenha elementos;
2. Adicione o Evento OnClick ou OnMouseMove ao elemento do botão de loop;
3. Ao clicar no botão atual, ele será exibido em um estado destacado. Através do loop for, todos os estilos de botão estão configurados para esvaziar. Defina a exibição de todos os divs como nenhum.
4. Clique no botão atual para adicionar estilo, exibir o Div atual e definir o visor para bloquear.
2. Código HTML:
<div id = "div1"> <input type = "button" value = "1"/> <input type = "button" value = "2"/> <input type = "button" value = "3"/> <input type = "button"/"4" 4 "/> <estilo" Exibir: bloco;
3. Parte do CSS:
.Active {Background:#9CC;}. Div2 {Width: 300px; Hight: 200px; Border: 1px #66666 Solid; Display: Nenhum;}4. Código JS:
<Script> window.onload = function () {var odiv = document.getElementById ('div1'); // obtenha div var btn = odiv.getElementsByTagName ('input'); // obtenha Div Div2 = odiv.getElementsByTagname ('div'); // sen Div em i = 0; btn [i] .index = i // btn [i] é o botão i-th do botão especificado; Adicione um atributo de índice ao botão e defina o valor do índice como i btn [i] .OnClick = function () // O evento de clique no botão {for (i = 0; i <btn.length; i ++) // loop remove o estilo do botão e ocultar o button e ocultar o buttão. o div} this.className = 'Active' // Adicionar Div2 ativo [this.index] .style.display = 'block' // this.index é o divl}}}} </script>Espero que este artigo seja útil para a programação JavaScript de todos.