Baru -baru ini, saya sering menggunakan halaman tab tab, jadi saya menulis yang sederhana.
Pertama -tama lihat gambar efeknya:
Selanjutnya, lihat bagaimana kode ditulis:
1. SP Filesytab.jsp
Salin kode kode sebagai berikut:
<%@ halaman bahasa = "java" gambar = "java.util.*" pageEncoding = "UTF-8"%>
<%
String path = request.getContextPath ();
String BasePath = request.getScheme ()+": //"+"+requestServerName ()+": "+requestServerport ()+path+"/";
%>
<!
<Html>
<head>
<base href = "<%= Basepath%>">
<Title> jsp 'tab.jsp' halaman awal </iteme>
<meta http-equiv = "progma" konten = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "kedaluwarsa" konten = "0">
<meta http-equiv = "kata kunci" content = "kata kunci1, kata kunci2, kata kunci3">
<meta http-equiv = "description" content = "Ini halaman saya" >>
<tautan rel = "stylesheet" type = "text/css" href = "<%= path%>/sumber daya/easytab/css/grey.css">
<skrip src = "<%= path%>/sumber daya/easytab/js/easytab.js" type = "text/javascript"> </cript>
</head>
<body>
<div>
<ul>
<li> <a name = "easytab" onclick = "tabswitch2 (this, 'easytab_content _', 0);"> puisi </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;"> puisi kalimat terkenal "mengambil krisan di bawah pagar, lihat Nanshan dengan santai."
<Div style = "Color: Blue; font-size: 16px; font-weight: bold;"> Drinking </Div>
<Div style = "Color: Blue; font-size: 16px; font-weight: bold;"> Knot ada di ranah rakyat tanpa kebisingan. </div>
<Div style = "Color: Blue; font-size: 16px; font-weight: bold;"> tanyakan jun he neng? Hati jauh. </div>
<Div style = "Color: Blue; font-size: 16px; font-weight: Bold;"> Chichelon East Fences, lihat Nanshan dengan santai. </div>
<Div style = "Color: Blue; font-size: 16px; font-weight: Bold;"> Mountains dan siang dan malam, burung terbang dan kembali. </div>
<Div style = "Color: Blue; font-size: 16px; font-weight: Bold;"> Ada arti sebenarnya dengan cara ini, dan dilupakan. </div>
<Div style = "Color:#00Aaff; font-size: 15px;">
Penghargaan atas pekerjaan:
"Di bawah pagar krisan, lihat Nanshan dengan santai", ini adalah hukuman terkenal selama ribuan tahun.
Karena ranah spiritual "jauh -hati", itu akan dengan santai mengambil krisan di bawah pagar,
Menatap pegunungan, sangat nyaman, sangat luar biasa!
Kedua kalimat ini memicu suasana hati penyair santai dalam deskripsi pemandangan objektif.
Ini menunjukkan bahwa apa yang dilihat penyair tidak dimaksudkan untuk dicari, tetapi untuk bertemu secara tak terduga.
Su Dongpo cukup menyebut dua kalimat ini: "Masa krisan, secara tidak sengaja melihat gunung -gunung, tidak mau melihatnya di awal, tetapi situasi dan niatnya, jadi itu bagus."
Kata "melihat" juga sangat berguna.
Jika Anda menggunakan kata "Wang", Anda memiliki Nanshan di dalam hati Anda, jadi Anda ingin melihatnya.
Apa kemenangan Nanshan, yang sangat memuji penyair?
Berikutnya adalah "Pegunungan dan Angin, burung -burung dikembalikan", yang juga merupakan pemandangan yang dilihat penyair secara tidak sengaja.
Dalam pemandangan senja yang indah dari Nanshan, burung -burung terbang terbang kembali ke hutan, dan semua hal bebas dan nyaman.
Sama seperti penyair menyingkirkan ikatan pejabat dan bebas, penyair menyadari arti sebenarnya dari alam dan kehidupan di sini.
"Ada makna yang benar, dan Anda ingin membedakan kata -kata itu."
Apakah semua hal beroperasi dan melakukan aturan alam mereka sendiri? Apakah ini merindukan masyarakat ideal kuno dan sederhana dan mandiri? Apakah itu filosofi filosofis alam?
Apakah ini karakter yang tulus? Para penyair tidak dengan jelas menyatakan bahwa mereka baru saja mengajukan pertanyaan dan meminta pembaca untuk berpikir, dan dia "ingin membedakan dirinya."
Jika Anda memahami "Jieyu di Ranah Rakyat dan Tidak Ada Kebisingan Mobil dan Kuda", kita dapat memahami makna hidup yang sebenarnya, "Makna Sejati",
Artinya, hidup tidak boleh ditarik dalam ketenaran dan kekayaan, dan tidak boleh ternoda oleh pejabat pejabat, tetapi harus kembali ke alam untuk menghargai kesegaran yang tak terbatas dan vitalitas alam!
Tentu saja, konotasi "makna yang benar" ini sangat besar.
</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>
<type skrip = "Teks/JavaScript">
Document.getElementsByName ("EasyTab") [0] .Click ();
</script>
</body>
</html>
Kedua, file gaya grey.css
Salin kode kode sebagai berikut:
tubuh {
Latar Belakang-Color: #CCC;
margin: 40px;
}
.sytab_area {
Perbatasan: 1px Solid #494E52;
Latar Belakang-Color:#636D76;
padding: 8px;
}
ul.easytabs {
Margin: 16px 0;
padding: 0 0 0 0 1px;
}
Ul.easytabs li {
List-style: tidak ada;
Tampilan: inline;
}
ul.easytabs li a {
Latar Belakang-Color:#464C54;
Warna:#ffebb5;
padding: 16px 14px;
Dekorasi Teks: Tidak Ada;
Ukuran font: 14px;
Font-Family: Verdana, Arial, Helvetica, Sans-Serif;
Font-weight: tebal;
Perbatasan: 1px Solid #464C54;
}
ul.easytabs li a: hold {
Latar Belakang-Color:#2F343A;
Border-color:#2F343A;
}
ul.easytab Li a.easytab_active {
Latar Belakang-Color: #FFFFFF;
Warna:#282E32;
Perbatasan: 1px Solid #464C54;
Border-Bottom: 2px solid #FFFFFF;
}
.sytab_content {
Latar Belakang-Color: #FFFFFF;
padding: 10px;
Tinggi: 400px;
}
3. JS file easytab.js
Salin kode kode sebagai berikut:
/**
*
* @param _This mengklik tag tab
* @Param content_prefix Tag sesuai dengan awalan ID div. Catatan: Berikut adalah awalan yang sama yang harus sama.
* @param aktif untuk mengaktifkan jumlah akhir ID div. Catatan: Jumlah yang diperlukan di sini harus dimulai dari awal, dan meningkat pada giliran 1.
*/
Fungsi tabswitch2 (_this, content_prefix, aktif) {
var tabs = document.geteLementsByName (_this.name);
var number = tabs.length;
untuk (var i = 0; i <number; i ++) {
var tab = tab [i];
tab.className = "";
document.geteLementById (content_prefix+i) .style.display = 'none';
}
_This.className = "EasyTab_Active";
document.geteLementById (content_prefix+aktif) .style.display = 'block';
}
Di atas. Ringkasan:
Pertama, gaya juga dapat dioptimalkan, seperti menambahkan beberapa gambar latar belakang.
Kedua, tag tab di sini dimuat semua halaman tab pada satu waktu, dan kemudian Anda dapat menampilkan halaman tab mana yang ditampilkan dan lainnya tersembunyi. Bahkan, Anda dapat mengatur konten halaman tab ke iframe, dan kemudian mengatur nilai SRC ke dalamnya secara dinamis, dan Anda dapat menyegarkan konten mana yang dapat dicapai.