Recientemente, a menudo uso las páginas de pestañas, así que escribí una simple.
Primera mira al dibujo del efecto:
A continuación, mira cómo se escribe el código:
1. SP filesytab.jsp
Copiar código del código de la siguiente manera:
<%@ page lenguaje = "java" image = "java.util.*" PageEncoding = "UTF-8"%>
<%
String ruta = request.getContextPath ();
String basepath = request.getScheme ()+": //"+"+requestServerName ()+": "+requestServerPort ()+ruta+"/";
%>
<!
<html>
<Evista>
<base href = "<%= basepath%>">
<title> my jsp 'tab.jsp' Página de inicio </title>
<meta http-equiv = "progma" content = "no-cache">
<meta http-oquiv = "cache-control" content = "no-cache">
<meta http-oquiv = "expires" content = "0">
<meta http-equiv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-equiv = "descripción" content = "esta es mi página" >>
<link rel = "stylesheet" type = "text/css" href = "<%= path%>/recursos/easytab/css/grey.css">
<script src = "<%= path%>/recursos/easytab/js/easytab.js" type = "text/javascript"> </script>
</ablo>
<Body>
<div>
<ul>
<li> <a name = "EasyTab" onClick = "Tabswitch2 (this, 'EasyTab_Content _', 0);"> Poesía </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 Search </a> </li>
</ul>
<div id = "easyTab_Content_0">
<Div style = "Color:#78BBAF; Font-Size: 14px;"> Poesía famosa oración "elige los crisantemos debajo de la cerca, ver Nanshan tranquilamente".
<Div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Beber </div>
<Div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> El nudo está en el reino de las personas sin el ruido. </div>
<Div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Pregúntale a Jun He Neng? El corazón está lejos. </div>
<Div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Chichelon East Fences, ver Nanshan tranquilamente. </div>
<Div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Montañas y día y noche, pájaros voladores y regreso. </div>
<Div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Hay un verdadero significado de esta manera, y olvidado. </div>
<div style = "color:#00aaff; font-size: 15px;">
Apreciación del trabajo:
"Bajo la cerca del crisantemo, ver Nanshan tranquilamente", esta es una frase famosa durante miles de años.
Debido al reino espiritual de "mucho corazón", recogerá crisantemo bajo la cerca,
Mirando a las montañas, es muy cómodo, ¡tan extraordinario!
Estas dos oraciones desencadenan el estado de ánimo tranquilo del poeta en la descripción del paisaje objetivo.
Muestra que lo que ve el poeta no pretende buscar, sino a reunirse inesperadamente.
Su Dongpo llama bastante estas dos oraciones: "Times de crisantemos, viendo accidentalmente las montañas, no dispuestas a verlo al principio, pero la situación y la intención, por lo que es bueno".
La palabra "ver" también es muy útil.
Si usa la palabra "Wang", tiene a Nanshan en su corazón, por lo que desea verla.
¿Cuál es la victoria de Nanshan, que elogia tanto al poeta?
El siguiente es "las montañas y vientos, se devuelven las aves", que también es el paisaje que el poeta ve inadvertidamente.
En el hermoso paisaje anochecer de Nanshan, los pájaros voladores volaron de regreso al bosque, y todas las cosas eran gratis y cómodas.
Al igual que el poeta se deshace de la encuadernación del funcionario y es libre, el poeta se da cuenta del verdadero significado de la naturaleza y la vida aquí.
"Hay un verdadero significado, y quieres distinguir las palabras".
¿Es que todas las cosas están operando y hacen sus propias reglas naturales? ¿Está anhelando la sociedad ideal de la antigua y simple y autosuficiente? ¿Es la filosofía filosófica de la naturaleza?
¿Es un personaje sincero? Los poetas no declararon claramente que simplemente plantearon las preguntas y les pidieron a los lectores que pensaran, y él "quería distinguirse".
Si entiendes el anterior "Jieyu en el reino del pueblo y sin ruido de auto y caballo", podemos entender el verdadero significado de la vida, "verdadero significado",
Es decir, la vida no debe dibujarse en la fama y la fortuna, y no debe ser empañada por el funcionario de los oficiales, ¡sino que debe regresar a la naturaleza para apreciar la frescura y la vitalidad infinita de la naturaleza!
Por supuesto, la connotación de este "verdadero significado" es muy 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"> </iframe>
</div>
</div>
<script type = "text/javaScript">
document.getElementsByName ("EasyTab") [0] .Click ();
</script>
</body>
</html>
Segundo, Style File Grey.css
Copiar código del código de la siguiente manera:
cuerpo {
Color de fondo: #CCC;
margen: 40px;
}
.sytab_area {
borde: 1px Solid #494E52;
Color de fondo:#636d76;
relleno: 8px;
}
Ul.Easytabs {
margen: 16px 0;
relleno: 0 0 0 0 1px;
}
Ul.Easytabs li {
Estilo de lista: Ninguno;
Pantalla: en línea;
}
ul.Easytabs li a {
Color de fondo:#464C54;
Color:#FFEBB5;
relleno: 16px 14px;
Decoración de texto: ninguna;
tamaño de fuente: 14px;
Font-Family: Verdana, Arial, Helvetica, Sans-Serif;
Font-Weight: Bold;
borde: 1px sólido #464c54;
}
ul.Easytabs li a: Hold {
Color de fondo:#2F343A;
Color de la frontera:#2F343A;
}
Ul.Easytabs Li A.EsyTab_Active {
Color de fondo: #ffffff;
Color:#282E32;
borde: 1px sólido #464c54;
Border-Bottom: 2px Solid #FFFFFFF;
}
.sytab_content {
Color de fondo: #ffffff;
relleno: 10px;
Altura: 400px;
}
3. JS File EasyTab.js
Copiar código del código de la siguiente manera:
/**
*
* @param _as etiquetas de pestaña
* @Param content_prefix La etiqueta de pestaña corresponde al prefijo ID del div. Nota: Aquí están los mismos prefijos que deben ser los mismos.
* @param activo para activar el número final de la identificación del div. Nota: El número requerido aquí debe comenzar desde cero y aumentar en la curva 1.
*/
Función tabswitch2 (_this, content_prefix, activo) {
var tabs = document.getElementsByName (_this.name);
Var número = tabs.length;
para (var i = 0; i <number; i ++) {
var tabs = tabs [i];
tab.classname = "";
document.getElementById (content_prefix+i) .style.display = 'none';
}
_THIS.ClassName = "EasyTab_Active";
document.getElementById (content_prefix+activo) .style.display = 'block';
}
Es lo anterior. Resumen:
Primero, el estilo también se puede optimizar, como agregar algunas imágenes de fondo.
En segundo lugar, la etiqueta de pestaña aquí se carga todas las páginas de pestañas a la vez, y luego puede mostrar qué página de pestaña se muestra y otras ocultas. De hecho, puede establecer el contenido de la página de pestaña en iframe, y luego establecer el valor del SRC dinámicamente, y puede actualizar a qué contenido se puede alcanzar.