เมื่อเร็ว ๆ นี้ฉันมักจะใช้หน้าแท็บแท็บดังนั้นฉันจึงเขียนแบบง่าย ๆ
ก่อนอื่นดูการวาดเอฟเฟกต์:
จากนั้นดูว่ารหัสถูกเขียนอย่างไร:
1. sp filesytab.jsp
คัดลอกรหัสรหัสดังนี้:
<%@ page language = "java" image = "java.util.*" pageencoding = "utf-8"%>
-
String Path = request.getContextPath ();
String basepath = request.getScheme ()+": //"+"+requestServerName ()+": "+requestServerport ()+path+"/";
-
<!
<html>
<head>
<base href = "<%= basepath%>">
<tite> หน้าเริ่มต้นของฉัน jsp 'tab.jsp' </title>
<meta http-equiv = "progma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "หมดอายุ" content = "0">
<meta http-equiv = "คำหลัก" content = "keyword1, keyword2, keyword3">
<meta http-equiv = "คำอธิบาย" content = "นี่คือหน้าของฉัน" >>
<link rel = "stylesheet" type = "text/css" href = "<%= path%>/resources/easytab/css/grey.css">
<script src = "<%= path%>/resources/easytab/js/easytab.js" type = "text/javascript"> </script>
</head>
<body>
<div>
<ul>
<li> <a name = "easyTab" onClick = "tabswitch2 (นี่, 'easyTab_Content _', 0);"> บทกวี </a> </li>
<li> <a name = "easyTab" onclight = "tabswitch2 (นี่, 'easytab_content _', 1);"> baidu </a> </li>
<li> <a name = "easyTab" onclight = "tabswitch2 (นี่, 'easytab_content _', 2);"> 360 ค้นหา </a> </li>
</ul>
<div id = "EasyTab_Content_0">
<div style = "สี:#78BBAF; FONT-SIZE: 14PX;"> บทกวีประโยคที่มีชื่อเสียง "เลือกดอกเบญจมาศใต้รั้วดู Nanshan อย่างสบาย ๆ "
<div style = "color: blue; font-size: 16px; font-weight: bold;"> การดื่ม </div>
<div style = "color: blue; font-size: 16px; font-weight: bold;"> ปมอยู่ในอาณาจักรของผู้คนโดยไม่มีเสียงรบกวน </div>
<div style = "color: blue; font-size: 16px; font-weight: bold;"> ถาม Jun He Neng? หัวใจอยู่ไกล </div>
<div style = "color: blue; font-size: 16px; font-weight: bold;"> Chichelon East Fences, ดู Nanshan อย่างสบาย ๆ </div>
<div style = "color: blue; font-size: 16px; font-weight: bold;"> ภูเขาและกลางวันและกลางคืน, นกบินและกลับมา </div>
<div style = "color: blue; font-size: 16px; font-weight: bold;"> มีความหมายที่แท้จริงในวิธีนี้และลืม </div>
<div style = "color:#00aaff; font-size: 15px;">
การชื่นชมผลงาน:
"ภายใต้รั้วของดอกเบญจมาศดู Nanshan อย่างสบาย ๆ " นี่เป็นประโยคที่มีชื่อเสียงมาหลายพันปี
เนื่องจากอาณาจักรแห่งจิตวิญญาณของ "ไกล -ใจ" มันจะหยิบดอกเบญจมาศอย่างสบาย ๆ ภายใต้รั้ว
มองขึ้นไปที่ภูเขามันสะดวกสบายมากพิเศษ!
ประโยคทั้งสองนี้ทำให้อารมณ์สบายของกวีในคำอธิบายของทิวทัศน์วัตถุประสงค์
มันแสดงให้เห็นว่าสิ่งที่กวีเห็นไม่ได้มีวัตถุประสงค์เพื่อแสวงหา แต่จะพบโดยไม่คาดคิด
Su Dongpo ค่อนข้างเรียกประโยคทั้งสองนี้: "Times of Chrysanthemums โดยบังเอิญเห็นภูเขาไม่เต็มใจที่จะเห็นมันในตอนแรก แต่สถานการณ์และความตั้งใจดังนั้นมันจึงดี"
คำว่า "การมองเห็น" นั้นมีประโยชน์มากเช่นกัน
หากคุณใช้คำว่า "วัง" คุณมี Nanshan อยู่ในใจดังนั้นคุณต้องการดูมัน
ชัยชนะของ Nanshan คืออะไรซึ่งชื่นชมกวีมากมาย?
ถัดไปคือ "ภูเขาและลมนกจะถูกส่งคืน" ซึ่งเป็นทิวทัศน์ที่กวีเห็นโดยไม่ตั้งใจ
ในทิวทัศน์ค่ำที่สวยงามของ Nanshan นกบินบินกลับไปที่ป่าและทุกสิ่งมีอิสระและสะดวกสบาย
เช่นเดียวกับกวีที่กำจัดความผูกพันของเจ้าหน้าที่และเป็นอิสระกวีตระหนักถึงความหมายที่แท้จริงของธรรมชาติและชีวิตที่นี่
"มีความหมายที่แท้จริงและคุณต้องการแยกแยะคำพูด" กวีที่แท้จริงได้ตระหนักถึงนกธรรมชาติ Nanshan, Sunset และ Autumn Chrysanthemum?
ทุกสิ่งกำลังดำเนินการและทำกฎตามธรรมชาติของตัวเองหรือไม่? กำลังโหยหาสังคมอุดมคติของโบราณและเรียบง่ายและมีความสามารถพิเศษหรือไม่? มันเป็นปรัชญาปรัชญาของธรรมชาติหรือไม่?
มันเป็นตัวละครที่จริงใจ? กวีไม่ได้ระบุไว้อย่างชัดเจนว่าพวกเขาเพิ่งตั้งคำถามและขอให้ผู้อ่านคิดและเขา "ต้องการแยกแยะตัวเอง"
หากคุณเข้าใจก่อนหน้านี้ "Jieyu ในอาณาจักรของผู้คนและไม่มีเสียงรถยนต์และม้า" เราสามารถเข้าใจความหมายที่แท้จริงของชีวิต "ความหมายที่แท้จริง"
นั่นคือชีวิตไม่ควรมีชื่อเสียงและโชคลาภและไม่ควรทำให้มัวหมองโดยเจ้าหน้าที่ของเจ้าหน้าที่ แต่ควรกลับสู่ธรรมชาติเพื่อชื่นชมความสดใหม่และพลังของธรรมชาติ!
แน่นอนความหมายแฝงของ "ความหมายที่แท้จริง" นี้มีขนาดใหญ่มาก
</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>
ประการที่สองไฟล์สไตล์ grey.css
คัดลอกรหัสรหัสดังนี้:
ร่างกาย {
พื้นหลังสี: #CCC;
มาร์จิ้น: 40px;
-
.sytab_area {
ชายแดน: 1px Solid #494E52;
พื้นหลังสี:#636D76;
Padding: 8px;
-
ul.easytabs {
มาร์จิ้น: 16px 0;
Padding: 0 0 0 0 0 1px;
-
ul.easytabs li {
รายการสไตล์: ไม่มี;
แสดง: อินไลน์;
-
ul.easytabs li a {
พื้นหลังสี:#464C54;
สี:#ffebb5;
Padding: 16px 14px;
การตกแต่งข้อความ: ไม่มี;
ขนาดตัวอักษร: 14px;
Font-Family: Verdana, Arial, Helvetica, Sans-Serif;
Font-Weight: ตัวหนา;
ชายแดน: 1px Solid #464C54;
-
ul.easytabs li a: ถือ {
พื้นหลังสี:#2F343A;
สีชายแดน:#2F343A;
-
ul.easytabs li a.easytab_active {
พื้นหลังสี: #ffffff;
สี:#282E32;
ชายแดน: 1px Solid #464C54;
ขอบด้านล่าง: 2px Solid #FFFFFF;
-
.sytab_content {
พื้นหลังสี: #ffffff;
Padding: 10px;
ความสูง: 400px;
-
3. JS File EasyTab.js
คัดลอกรหัสรหัสดังนี้:
-
-
* @param _ แท็บแท็บคลิก
* แท็บแท็บ @param content_prefix สอดคล้องกับคำนำหน้า id ของ div หมายเหตุ: นี่คือคำนำหน้าเดียวกันที่ต้องเหมือนกัน
* @param ใช้งานเพื่อเปิดใช้งานหมายเลขสุดท้ายของ ID ของ DIV หมายเหตุ: หมายเลขที่ต้องการที่นี่จะต้องเริ่มต้นจากศูนย์และเพิ่มในเทิร์น 1
-
ฟังก์ชั่น tabswitch2 (_this, content_prefix, active) {
tabs var = document.getElementsByName (_this.name);
var number = tabs.length;
สำหรับ (var i = 0; i <number; i ++) {
tab var = แท็บ [i];
tab.className = "";
document.getElementById (content_prefix+i) .style.display = 'ไม่มี';
-
_this.className = "easyTab_active";
document.getElementById (content_prefix+active) .style.display = 'block';
-
มันคือข้างต้น สรุป:
ก่อนอื่นรูปแบบสามารถปรับให้เหมาะสมเช่นการเพิ่มรูปภาพพื้นหลังบางส่วน
ประการที่สองแท็บแท็บที่นี่จะโหลดหน้าแท็บทั้งหมดในครั้งเดียวจากนั้นคุณสามารถแสดงหน้าแท็บที่แสดงหน้าและซ่อนหน้าอื่น ๆ ในความเป็นจริงคุณสามารถตั้งค่าเนื้อหาของหน้าแท็บเป็น iframe จากนั้นตั้งค่าของ SRC เป็นแบบไดนามิกและคุณสามารถรีเฟรชเนื้อหาที่สามารถเข้าถึงได้