Este artigo descreve o método de implementar o efeito de comutação do menu da guia pelo JS+CSS. Compartilhe para sua referência. O método de implementação específico é o seguinte:
index.css é o seguinte:
Copie o código da seguinte forma:* {
margem: 0px;
preenchimento: 0px;
}
corpo {
Largura: 600px;
margem: 0 automático;
Background-Color: prata;
}
#Contanier {
cor de fundo: amarelo;
largura: 600px; altura: 400px;
}
#tabnavi {
largura: 600px; altura: 30px;
Background-Color: #00bfff;
Decoração de texto: Nenhum;
Tipo no estilo de lista: nenhum;
}
#tabnavi li {
flutuar: esquerda;
Margem-direita: 7px;
Background-Color: #008b8b;
Cor: Branco;
Cursor: Ponteiro;
Largura: 60px;
Altura: 28px;
altura de linha: 30px;
Alinhamento de texto: centro;
}
#contente {
largura: 600px; altura: 370px;
cor de fundo: branco;
}
Index.html é o seguinte:
Copie o código da seguinte forma: <! Doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text/html; charset = utf-8"/>
<Title> JS realiza o efeito de comutação dinâmica do menu da guia </ititure>
<link href = "css /index.css" rel = "Stylesheet" />
<script type = "text/javascript">
função gel (id) {
retornar document.getElementById (id);
}
var arr = [
{"Title": "News", "Content": "This Is A News Channel"},
{"Title": "Financial", "Content": "este é o canal financeiro"},
{"title": "entretenimento", "conteúdo": "este é um canal de entretenimento"},
{"Title": "Sports", "Content": "This Is A Sports Channel"},
{"Title": "Car", "Content": "este é o canal do carro"},
{"Title": "Video", "Content": "This Is A Video Channel"},
{"Title": "Life", "Content": "This Is A Life Channel"}
];
window.onload = function () {
for (var i = 0; i <arn.length; i ++) {
var linew = document.createElement ("li");
linew.innerhtml = arr [i] .title;
gel ("Tabnavi"). AppendChild (Linew);
// vincular eventos de clique nesses LIS, então você precisa atribuir uma propriedade a cada um deles (de preferência ID)
linew.setattribute ("id", i);
linew.onClick = function () {
var NAVS = gel ("Tabnavi"). ChildNodes;
// Limpe todas as cores
for (var j = 0; j <naves.length; j ++) {
if (Navs [j] .NodEType == 1) {
Navs [j] .style.backgroundColor = "#008b8b";
}
}
this.style.backgroundcolor = "vermelho";
gel ("content"). innerhtml = arr [this.id] .Content;
};
}
};
</script>
</head>
<Body>
<div id = "contanier">
<ul id = "tabnavi"> </ul>
<div id = "content"> </div>
</div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.