Récemment, j'utilise souvent les pages d'onglet, donc j'en ai écrit une simple.
Visitez d'abord le dessin d'effet:
Ensuite, regardez comment le code est écrit:
1. Sp FilesyTab.jsp
Copier le code du code comme suit:
<% @ Page Language = "Java" Image = "Java.util. *" Pageencoding = "UTF-8"%>
<%
String path = request.getContextPath ();
String basepath = request.getscheme () + ": //" + "+ requestServerName () +": "+ requestServerport () + path +" / ";
%>
<!
<html>
<adal>
<base href = "<% = baspath%>">
<Title> mon jsp 'tab.jsp' Page de départ </Title>
<méta http-equiv = "progma" contenu = "non-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<méta http-equiv = "expires" content = "0">
<meta http-equiv = "keywords" contenu = "keyword1, keyword2, keyword3">
<méta http-equiv = "Description" content = "Ceci est ma page" >>
<link rel = "stylesheet" type = "text / css" href = "<% = path%> / ressources / easytab / css / grey.css">
<script src = "<% = path%> / ressources / easytab / js / easytab.js" type = "text / javascript"> </ script>
</ head>
<body>
<div>
<ul>
<li> <a name = "easytab" onclick = "tabswitch2 (this, 'easytab_content _', 0);"> poésie </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; Galen-taille: 14px;"> Poetry Famous Phrase "Choisissez les chrysanthèmes sous la clôture, voir Nanshan tranquillement."
<div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Drink </div>
<div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Le nœud est dans le domaine du peuple sans le bruit. </div>
<div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Ask Jun He neng? Le cœur est loin. </div>
<div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Chichelon East Fences, voir Nanshan tranquillement. </div>
<div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Montagnes et Day and Night, Flying Birds and Returning. </div>
<div style = "Color: Blue; Font-Size: 16px; Font-Weight: Bold;"> Il y a une vraie signification de cette manière, et oublié. </div>
<div style = "Color: # 00AAFF; Police-Size: 15px;">
Appréciation du travail:
"Sous la clôture du chrysanthemum, voir Nanshan tranquillement", c'est une peine célèbre pendant des milliers d'années.
En raison du royaume spirituel de "caritté éloigné", il ramassera tranquillement le chrysanthème sous la clôture,
En regardant les montagnes, c'est tellement confortable, tellement extraordinaire!
Ces deux phrases ont déclenché l'humeur tranquille du poète dans la description du paysage objectif.
Cela montre que ce que le poète voit n'est pas destiné à rechercher, mais à se rencontrer de façon inattendue.
Su Dongpo appelle tout à fait ces deux phrases: "Temps de chrysanthèmes, voyant accidentellement les montagnes, ne voulant pas le voir au début, mais la situation et l'intention, donc c'est bien."
Le mot «voir» est également très utile.
Si vous utilisez le mot "Wang", vous avez Nanshan dans votre cœur, vous voulez donc le regarder.
Quelle est la victoire de Nanshan, qui loue tant le poète?
Ensuite, "les montagnes et les vents, les oiseaux sont retournés", qui est également le paysage que le poète voit par inadvertance.
Dans le magnifique paysage crépusculaire de Nanshan, Flying Birds est retourné dans la forêt, et tout était gratuit et confortable.
Tout comme le poète se débarrasse de la liaison de la fonctionnalité et est libre, le poète réalise le vrai sens de la nature et de la vie ici.
"Il y a une vraie signification, et vous voulez distinguer les mots." Ce que le poète a réalisé de cet oiseau naturel, Nanshan, Sunset et Chrysanthemum d'automne?
Est-ce que toutes choses fonctionnent et font leurs propres règles naturelles? Est-ce que elle aspire à la société idéale de la société ancienne et simple et auto-épouvante? Est-ce la philosophie philosophique de la nature?
Est-ce un personnage sincère? Les poètes n'ont pas clairement déclaré qu'ils avaient soulevé les questions et demandé aux lecteurs de réfléchir, et il "voulait se distinguer".
Si vous comprenez le «Jieyu dans le domaine du peuple et pas de bruit de voiture et de cheval», nous pouvons comprendre le vrai sens de la vie, le «vrai sens»,
C'est-à-dire que la vie ne doit pas être tirée dans la gloire et la fortune, et ne doit pas être ternie par l'administration de l'administration, mais devrait revenir à la nature pour apprécier la fraîcheur et la vitalité infinies de la nature!
Bien sûr, la connotation de cette «vraie signification» est très 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 ();
</cript>
</docy>
</html>
Deuxièmement, fichier de style grey.css
Copier le code du code comme suit:
corps {
Color d'arrière-plan: #ccc;
marge: 40px;
}
.sytab_area {
Border: 1px solide # 494E52;
Color d'arrière-plan: # 636d76;
rembourrage: 8px;
}
ul.easytabs {
marge: 16px 0;
rembourrage: 0 0 0 0 1px;
}
ul.easytabs li {
Style de liste: aucun;
Affichage: en ligne;
}
ul.easytabs li a {
Color d'arrière-plan: # 464C54;
Couleur: # FFEBB5;
rembourrage: 16px 14px;
Décoration du texte: aucune;
taille de police: 14px;
Font-Family: Verdana, Arial, Helvetica, Sans-Serif;
Police-poids: Bold;
Border: 1px solide # 464C54;
}
ul.easytabs li a: hold {
Color d'arrière-plan: # 2F343A;
Color à la frontière: # 2F343A;
}
ul.easytabs li a.easytab_active {
Color d'arrière-plan: #FFFFFF;
Couleur: # 282E32;
Border: 1px solide # 464C54;
Border-Bottom: 2px solide #ffffff;
}
.sytab_content {
Color d'arrière-plan: #FFFFFF;
rembourrage: 10px;
hauteur: 400px;
}
3. Fichier JS easytab.js
Copier le code du code comme suit:
/ **
*
* @param _Ce clic des balises de tab
* @Param contenu_prefix tab étiquette correspond au préfixe d'ID du div. Remarque: voici les mêmes préfixes qui doivent être les mêmes.
* @param actif pour activer le numéro final de l'ID du div. Remarque: Le nombre requis ici doit commencer à zéro et augmenter au tour 1.
* /
Fonction tabSwitch2 (_This, content_prefix, actif) {
var tabs = document.getElementsByName (_This.name);
var numéro = tabs.length;
pour (var i = 0; i <nombre; i ++) {
var tab = onglets [i];
tab.classname = "";
document.getElementById (content_prefix + i) .style.display = 'Aucun';
}
_This.classname = "easyTab_active";
document.getElementById (content_prefix + active) .style.display = 'block';
}
C'est ce qui précède. Résumé:
Tout d'abord, le style peut également être optimisé, comme l'ajout de quelques images d'arrière-plan.
Deuxièmement, la balise d'onglet ici est chargée toutes les pages d'onglet en même temps, puis vous pouvez afficher la page d'onglet affichée et d'autres cachées. En fait, vous pouvez définir le contenu de la page d'onglet sur IFRAME, puis régler la valeur du SRC dynamiquement, et vous pouvez actualiser le contenu qui peut être atteint.