Este artigo compartilhou com você o código específico para o JS implementar um efeito simples de comutação de guias para sua referência. O conteúdo específico é o seguinte
Código de comutação da guia JS:
<! doctype html> <html lang = "pt"> <head> <meta charset = "utf-8"> <meta name = "generator" content = "editplus®"> <meta name = "autor" "" "> <meta name =" keywords "content =" "> <tena name =" concession = ""> <meta (keywords "> type = "text/css" href = "base.css" media = "all"/> <style type = "text/css"> a {color: #a0b3d6;}. guias {borda: 1px sólido #a0b3d6; margin: 100px; largura: 300px; A {Background: #eAF0FD; Linha-Hight: 30px; preenchimento: 0 20px; Display: Inline-Block; Border-Right: 1px Solid #A0B3D6; Border-Bottom: 1px Solid #A0B3D6; Float: Esquerda;}. White; _Position: relativo;}. Tabs-Content {preenchimento: 20px; Border-top: 1px Solid #a0b3d6; margin-top: -1px;} </style> </ad Head> <body> <div id = "tabs"> <H2> <a a href = "javScript:;"> href = "javascript :;"> tecnologia </a> <a href = "javascript :;"> vida </a> Tecnologia tecnologia tecnologia tecnologia tecnologia tecnologia vida vida vida vida vida vida trabalha works works works works works works works works works works works works works works works works works works works Works Works Works Works </p> </div> <br/> <br/> <div id = "tabs2"> <h2> <a href = "javascript:;"> 11111 </a> <a href = "javascript:;"> 22222 </a> <a href = "javascript :;"> 33333 </a> </h2> <p> 1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111 111111111111111111111111111111111111111111111111111 2222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222 2222222222222222222222222222222222222222222222222222222222222222222222 type = "text/javascript" src = "tabs.js"> </script> <script type = "text/javascript"> window.onload = function () {tabs ('tabs', 'click'); tabs ('tabs2', 'mouseover');Tabs.js
Tabs de função (id, trigger) {var tabsbtn = document.getElementById (id) .getElementsByTagName ('h2') [0] .getElementsByTagName ('a'); var tabScontent = document.getElementById (id) .getElementsByTagName ('P'); i ++) {tabsbtn [i] .index = i; if (trigger == 'click') {tabsbtn [i] .OnClick = function () {clearclass (); this.className = 'on'; showContent (this.index);}} else if (trigger == 'mouseOver') {tabsbtn [i] .onMouseOver = function () {clearclass (); this.className = 'on'; ShowContent (this.index);}}} Função mostra (n) {for (var i = 0, len = tabsbtn.length; i <len; i ++) {TabScontent [i] .classname = 'hide';} tabscOntent []. clearclass () {for (var i = 0, len = tabsbtn.length; i <len; i ++) {tabsbtn [i] .className = '';}}}base.css
@Charset "utf-8";/*@ nome: base@ função: redefinir o estilo padrão do navegador*//*impedir o impacto da cor de fundo definida pelo usuário na página da web, adicione para permitir que os usuários personalizem fontes*/html {cor: preto; fundo: branco;}/*as margens internas e internas geralmente fazem as posições de performance de cada um dos estilos de performance de cada um dos estilos de performance; */body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {margem: 0; preenchimento: 0;}/* Observe que os elementos do formulário não herdam a fonte pai*/corpo, botão, entrada, selecione, textarea {font: 12px simsun, tahoma, arial, sans-serif;} entrada, selecione, tabela de tabela e tabela de tabela e size: 100%;}/* Remover; {colapso da borda: colapso; espaçamento da borda: 0;}/* ie Bug corrigido: th não herda o text-align*/th {text-align: herd;}/* remova a borda padrão*/fieldSet, rump {border: nenhum;}/* ie6 7 8 (q) desliza como em-line* */abbr, sigla {fronteira: nenhum; font-variant: normal;}/*estilo del de del consistente*/del {decoração de texto: line-through;} endereço, legenda, citação, código, dfn, em, remo, varejamento, lier; {estilo de lista: nenhum;}/* alinhado é o fator mais importante no tipo de letra, não centralize tudo*/legenda, th {text-align: esquerd;}/* do yahoo, que o título seja personalizado, adapte-se a vários aplicativos de sistema*/h1, h2, h3, h4, h5, h6 {font-size 100%; FONTE: FONTE; {Content: '';}/* Superscrito unificado e subscrito*/sub, sup {Size da fonte: 75%; altura da linha: 0; posição: relativa; vertical-align: linear;} sup {top: -0.5em;} sub {Bottom: -0em; a:}/* link o link Principia; O sublinhado não é exibido por padrão, mantendo a página concisa*/insa, a {decoração de texto: nenhum;}/*ie6,7 Remoção de linha de ponto de foco*/a: foco,*: foco {esboço: nenhum;}/*float*/. Clearfix: antes, .clefix: depois {{content: "; {clear: ambos; estouro: hidden;}. clearfix {zoom: 1; /* para ie6 ie7*/}. Clear {Clear: Ambos; Display: Block; Overflow: Hidden; Hight: 0; Linha-HEATH: 0; Size de fonte: 0;}/* Definir e ocultar, geralmente usado para cooperar com Js*/. {float: esquerda; display: inline;}. fr {float: direita; display: inline;}O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.