Recentemente, costumo usar as páginas da guia, por isso escrevi uma simples.
Primeiro veja o desenho do efeito:
Em seguida, veja como o código é escrito:
1. SP filesytab.jsp
Copie o código do código da seguinte forma:
<%@ Page Language = "Java" Image = "Java.util.*" PageEncoding = "UTF-8"%>
<%
String path = request.getContextPath ();
String basalepath = request.getScheme ()+": //"+"+requestServername ()+": "+requestServerport ()+path+"/";
%>
<!
<html>
<head>
<base href = "<%= bashepath%>">
<title> meu jsp 'tab.jsp' página de partida </title>
<meta http-equiv = "progma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "expira" content = "0">
<meta http-equiv = "palavras-chave" content = "palavra-chave1, palavra-chave2, palavra-chave3">
<meta http-equiv = "description" content = "Esta é a minha página" >>
<link rel = "stylesheet" type = "text/css" href = "<%= caminho%>/recursos/easyTab/css/grey.css">>
<script src = "<%= caminho%>/Resources/easyTab/js/easytab.js" type = "text/javascript"> </sCript>
</head>
<Body>
<div>
<ul>
<li> <a name = "easytab" onclick = "tabswitch2 (this, 'easytab_content _', 0);"> poesia </a> </li>
<li> <a name = "easyTab" onclight = "Tabswitch2 (this, 'easytab_content _', 1);"> Baidu </a> </li>
<li> <a name = "easyTab" onclight = "Tabswitch2 (this, 'easytab_content _', 2);"> 360 pesquisa </a> </li>
</ul>
<div id = "easytab_content_0">
<div style = "cor:#78BBAF; tamanho da fonte: 14px;"> Poesia Famosa Famosa "escolhe os crisântemos sob a cerca, veja Nanshan, lazer".
<div style = "cor: azul; tamanho da fonte: 16px; peso da fonte: negrito;"> bebendo </div>
<div style = "cor: azul; tamanho da fonte: 16px; peso da fonte: negrito;"> O nó está no reino das pessoas sem o ruído. </div>
<div style = "cor: azul; tamanho da fonte: 16px; peso da fonte: ousado;"> pergunte a Jun He Neng? O coração está longe. </div>
<div style = "cor: azul; tamanho da fonte: 16px; peso da fonte: ousado;"> Chichelon East Cercas, veja Nanshan, lazer. </div>
<div style = "cor: azul; tamanho da fonte: 16px; peso da fonte: negrito;"> montanhas e dia e noite, pássaros voadores e retornando. </div>
<div style = "cor: azul; tamanho da fonte: 16px; peso da fonte: negrito;"> Há um verdadeiro significado dessa maneira e esquecido. </div>
<div style = "cor:#00Aaff; font-size: 15px;">
Apreciação do trabalho:
"Sob a cerca do crisântemo, veja Nanshan, lazer", esta é uma sentença famosa por milhares de anos.
Por causa do reino espiritual de "Far -Hearty", ele pegará o crisântemo sob a cerca,
Olhando para as montanhas, é tão confortável, tão extraordinário!
Essas duas frases desencadearam o humor do poeta na descrição do cenário objetivo.
Isso mostra que o que o poeta vê não pretende procurar, mas se encontrar inesperadamente.
Su Dongpo está chamando essas duas frases: "Tempos de crisântemos, acidentalmente vendo as montanhas, não querendo vê -lo no começo, mas a situação e a intenção, então é bom".
A palavra "ver" também é muito útil.
Se você usa a palavra "Wang", você tem Nanshan em seu coração, então quer olhar para ela.
Qual é a vitória de Nanshan, que elogia tanto o poeta?
Em seguida, são "as montanhas e os ventos, os pássaros são devolvidos", que também é o cenário que o poeta vê inadvertidamente.
No belo cenário do anoitecer de Nanshan, os pássaros voadores voaram de volta para a floresta, e todas as coisas eram livres e confortáveis.
Assim como o poeta se livra da ligação da Officedom e é livre, o poeta percebe o verdadeiro significado da natureza e da vida aqui.
"Há um verdadeiro significado, e você deseja distinguir as palavras."
Será que todas as coisas estão operando e fazem suas próprias regras naturais? É ansiosa para a sociedade ideal de antiga, simples e auto -sofrida? É a filosofia filosófica da natureza?
É um personagem sincero? Os poetas não declararam claramente que apenas levantaram as perguntas e pediram aos leitores que pensassem, e ele "queria se distinguir".
Se você entende o anterior "Jieyu no reino do povo e nenhum barulho de carro e cavalo", podemos entender o verdadeiro significado da vida, "significado verdadeiro",
Ou seja, a vida não deve ser desenhada na fama e na fortuna, e não deve ser manchada pela Officedom of the Officeomd, mas deve retornar à natureza para apreciar a infinita frescura e vitalidade da natureza!
Obviamente, a conotação desse "significado verdadeiro" é muito grande.
</div>
</div>
<div id = "easytab_content_1">
<iframe frameborder = "0" scrolling = "auto" src = "http://www.baidu.com"> </iframe>
</div>
<div id = "easytab_content_2">
<iframe frameborder = "0" scrolling = "auto" src = "http://www.so.com"> </frame>
</div>
</div>
<script type = "text/javascript">
Document.getElementsByName ("EasyTab") [0] .Click ();
</script>
</body>
</html>
Segundo, Style File Grey.css
Copie o código do código da seguinte forma:
corpo {
Background-Color: #CCC;
margem: 40px;
}
.sytab_area {
borda: 1px Solid #494E52;
Background-Color:#636D76;
preenchimento: 8px;
}
ul.easytabs {
margem: 16px 0;
preenchimento: 0 0 0 0 1px;
}
ul.easytabs li {
estilo de lista: nenhum;
exibição: embutido;
}
ul.easytabs li a {
Background-Color:#464C54;
Cor:#ffebb5;
preenchimento: 16px 14px;
Decoração de texto: Nenhum;
Size da fonte: 14px;
Fonte-família: Verdana, Arial, Helvetica, Sans-Serif;
Peso da fonte: negrito;
borda: 1px Solid #464C54;
}
ul.easytabs li a: segure {
Background-Color:#2F343A;
Border-Color:#2F343A;
}
ul.easytabs li a.easytab_active {
Background-Color: #ffffff;
Cor:#282E32;
borda: 1px Solid #464C54;
Fundo de borda: 2px sólido #ffffff;
}
.sytab_content {
Background-Color: #ffffff;
preenchimento: 10px;
Altura: 400px;
}
3. arquivo js easytab.js
Copie o código do código da seguinte forma:
/**
*
* @param _Este guia Clicou tags
* @Param Content_Prefix Tag corresponde ao prefixo ID do div. Nota: Aqui estão os mesmos prefixos que devem ser os mesmos.
* @param ativo para ativar o número final do ID da div. Nota: O número necessário aqui deve começar do zero e aumentar na curva 1.
*/
Função tabswitch2 (_This, content_prefix, ativo) {
var tabs = document.getElementsByName (_This.name);
var número = guias.length;
for (var i = 0; i <número; i ++) {
var tab = guias [i];
tab.className = "";
document.getElementById (content_prefix+i) .style.display = 'nenhum';
}
_This.className = "easyTab_Active";
document.getElementById (content_prefix+ativo) .style.display = 'bloqueio';
}
É o acima. Resumo:
Primeiro, o estilo também pode ser otimizado, como adicionar algumas imagens de fundo.
Segundo, a tag de guia aqui é carregada todas as páginas da guia ao mesmo tempo e você pode exibir qual página da guia é exibida e outra oculta. De fato, você pode definir o conteúdo da página da guia como iframe e definir o valor do SRC para ele dinamicamente e pode atualizar qual conteúdo pode ser alcançado.