Vor kurzem verwende ich die Registerkarten -Seiten oft, also habe ich eine einfache geschrieben.
Schauen Sie sich zunächst die Effektzeichnung an:
Schauen Sie sich als nächstes an, wie der Code geschrieben wird:
1. SP FileSytab.jsp
Kopieren Sie den Code -Code wie folgt:
<%@ page Language = "java" image = "java.util.*" pageCoding = "utf-8"%>
<%
String path = request.getContextPath ();
String basepath = request.getScheme ()+": //"+"+RequestServerName ()+": "+requestServerport ()+Pfad+"/";
%>
<!
<html>
<kopf>
<Basis href = "<%= Basepath%>">
<title> My JSP 'Tab.jsp' Startseite </title>
<meta http-äquiv = "progma" content = "no-cache">
<meta http-äquiv = "cache-control" content = "no-cache">
<meta http-äquiv = "abläuft" content = "0">
<meta http-equiv = "keywords" content = "keyword1, keyword2, keyword3">
<meta http-äquiv = "Beschreibung" content = "Dies ist meine Seite" >>
<link rel = "stylesheet" type = "text/css" href = "<%= path%>/ressourcen/easyTab/css/grey.css">
<script src = "<%= path%>/ressourcen/easyTab/js/easytab.js" type = "text/javaScript"> </script>
</head>
<body>
<div>
<ul>
<li> <a name = "easyTab" onclick = "tabSwitch2 (this, 'easytab_content _', 0);"> Poesie </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; Schriftgröße: 14px;"> Poesie berühmte Satz "wählt die Chrysanthemen unter dem Zaun aus, siehe Nanshan gemächlich."
<div style = "color: blau; Schriftgröße: 16px; Schriftgewicht: fett;"> Trinken </div>
<div style = "color: blau; Schriftgröße: 16px; Schriftgewicht: fett;"> Der Knoten befindet sich im Reich der Menschen ohne Lärm. </div>
<div style = "color: blau; Schriftgröße: 16px; Schriftgewicht: fett;"> Fragen Sie Jun HE Neng? Das Herz ist weit weg. </div>
<div style = "color: blau; Schriftgröße: 16px; Schriftgewicht: fett;"> Chichelon Ostzäune, siehe gemächlich. </div>
<div style = "color: blau; Schriftgröße: 16px; Schriftgewicht: fett;"> Berge und Tag und Nacht, fliegende Vögel und Rückkehr. </div>
<div style = "color: blau; Schriftgröße: 16px; Schriftgewicht: fett;"> Auf diese Weise gibt es eine wahre Bedeutung und vergessen. </div>
<div style = "color:#00aaff; Schriftgröße: 15px;">
Wertschätzung der Arbeit:
"Unter dem Zaun des Chrysanthemens siehe Nanshan gemütlich", ist dies eine berühmte Haftstrafe für Tausende von Jahren.
Wegen des spirituellen Bereichs von "weitherzig" wird es gemächlich Chrysanthemen unter dem Zaun aufnehmen.
Wenn man in die Berge aufsieht, ist es so komfortabel, so außergewöhnlich!
Diese beiden Sätze lösten die gemächliche Stimmung des Dichters in der Beschreibung der objektiven Landschaft aus.
Es zeigt, dass das, was der Dichter sieht, nicht suchen soll, sondern sich unerwartet treffen soll.
Su Dongpo ruft diese beiden Sätze ganz an: "Zeiten von Chrysanthemen, die versehentlich die Berge sehen und nicht zu Beginn sehen wollen, aber die Situation und die Absicht, also ist es gut."
Das Wort "Sehen" ist auch sehr nützlich.
Wenn Sie das Wort "Wang" verwenden, haben Sie Nanshan in Ihrem Herzen, also möchten Sie es sich ansehen.
Was ist der Sieg von Nanshan, der den Dichter so sehr lobt?
Als nächstes "Die Berge und Winde, die Vögel werden zurückgegeben", was auch die Landschaft ist, die der Dichter versehentlich sieht.
In der wunderschönen Dämmerlandschaft von Nanshan flogen fliegende Vögel zurück in den Wald, und alle Dinge waren kostenlos und komfortabel.
Genau wie der Dichter die Bindung des Amtes beseitigt und frei ist, erkennt der Dichter die wahre Bedeutung von Natur und Leben hier.
"Es gibt eine wahre Bedeutung, und Sie möchten die Worte unterscheiden."
Ist es so, dass alle Dinge operieren und ihre eigenen natürlichen Regeln tun? Sehnt es sich nach der idealen Gesellschaft des Alten und einfachen und selbstverständlichen Gesellschaft? Ist es die philosophische Naturphilosophie?
Ist es ein aufrichtiger Charakter? Die Dichter gaben nicht klar an, dass sie gerade die Fragen aufgeworfen und die Leser zum Nachdenken baten, und er wollte sich "sich selbst unterscheiden".
Wenn Sie den vorherigen "Jieyu im Reich des Volkes und kein Auto- und Pferderäuschen" verstehen, können wir den wahren Sinn des Lebens verstehen, "wahrer Sinn",
Das heißt, das Leben sollte nicht in Ruhm und Vermögen gezogen werden und nicht durch das Amt des Amtes der Amtung getrübt werden, sondern sollte zur Natur zurückkehren, um die unendliche Frische und Vitalität der Natur zu schätzen!
Die Konnotation dieser "wahren Bedeutung" ist natürlich sehr groß.
</div>
</div>
<div id = "easytab_content_1">
<iframe Framborder = "0" scrolling = "auto" src = "http://www.baidu.com"> </iframe>
</div>
<div id = "easytab_content_2">
<Iframe Framborder = "0" scrolling = "auto" src = "http://www.so.com"> </iframe>
</div>
</div>
<script type = "text/javaScript">
document.getElementsByName ("easyTab") [0] .click ();
</script>
</body>
</html>
Zweitens Style -Datei grey.css
Kopieren Sie den Code -Code wie folgt:
Körper {
Hintergrundfarbe: #CCC;
Rand: 40px;
}
.Sytab_area {
Grenze: 1PX Solid #494e52;
Hintergrundfarbe:#636D76;
Polsterung: 8px;
}
ul.easytabs {
Rand: 16px 0;
Polsterung: 0 0 0 0 1px;
}
ul.easytabs li {
Listenstil: Keine;
Anzeige: Inline;
}
ul.easytabs li a {
Hintergrundfarbe:#464C54;
Farbe:#ffebb5;
Polsterung: 16px 14px;
Textdekoration: Keine;
Schriftgröße: 14px;
Schriftfamilie: Verdana, Arial, Helvetica, Sans-Serif;
Schriftgewicht: fett;
Grenze: 1PX Solid #464C54;
}
ul.easytabs li a: heed {
Hintergrundfarbe:#2f343a;
Grenzfarbe:#2f343a;
}
ul.easytabs li a.easytab_active {
Hintergrundfarbe: #ffffff;
Farbe:#282e32;
Grenze: 1PX Solid #464C54;
Border-Bottom: 2PX Solid #ffffff;
}
.Sytab_Content {
Hintergrundfarbe: #ffffff;
Polsterung: 10px;
Höhe: 400px;
}
3. JS -Datei EasyTab.js
Kopieren Sie den Code -Code wie folgt:
/**
*
* @param _This klickte auf Registerkarten -Tags geklickt
* @Param content_prefix tab tag -Tag entspricht dem ID -Präfix der Div. Hinweis: Hier sind die gleichen Präfixe, die gleich sein müssen.
* @param aktiv, um die endgültige Anzahl der ID der Div zu aktivieren. Hinweis: Die hier erforderliche Anzahl muss von vorne beginnen und in Kurve 1 erhöhen.
*/
Funktion tabSwitch2 (_this, content_prefix, aktiv) {
var tabs = document.getElementsByName (_this.name);
var number = tabs.length;
für (var i = 0; i <nummer; i ++) {
var tab = tabin [i];
tab.className = "";
document.getElementById (content_prefix+i) .style.display = 'none';
}
_This.className = "easyTab_active";
document.getElementById (content_prefix+active) .style.display = 'block';
}
Es ist das oben genannte. Zusammenfassung:
Erstens kann auch der Stil optimiert werden, z. B. das Hinzufügen einiger Hintergrundbilder.
Zweitens wird das Registerkarten -Tag hier gleichzeitig geladen. Anschließend können Sie anzeigen, welche Registerkartenseite angezeigt wird und andere versteckt sind. Tatsächlich können Sie den Inhalt der Registerkartenseite auf IFrame einstellen und dann den Wert des SRC dynamisch auf ihn setzen und den Inhalt erfrischen können.