في الآونة الأخيرة ، أستخدم صفحات علامة التبويب ، لذلك كتبت صفحات بسيطة.
انظر أولاً إلى رسم التأثير:
بعد ذلك ، انظر إلى كيفية كتابة الرمز:
1. sp fileytab.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 ٪>">
<title> my JSP 'Tab.jsp' صفحة البدء </title>
<meta http-equiv = "progma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "Expires" content = "0">
<meta http-equiv = "الكلمات الرئيسية" content = "Keyword1 ، Keyword2 ، Keyword3">
<meta http-equiv = "description" content = "This is is my part" >>
<link rel = "stylesheet" type = "text/css" href = "<٪ = path ٪>/sourse/easytab/css/grey.css">
<script src = "<٪ = path ٪>/eashtab/js/easytab.js" type = "text/javaScript"> </script>
</head>
<body>
<viv>
<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 Search </a> </li>
</ul>
<div id = "easytab_content_0">
<div style = "color:#78bbaf ؛ size-size: 14px ؛"> Poetry Complete Contence "يختار chrysanthemums تحت السياج ، انظر Nanshan على مهل."
<div style = "color: Blue ؛ Font-Size: 16px ؛ Font-Weight: Bold ؛"> Drink </iv>
<div style = "اللون: أزرق ؛ حجم الخط: 16px ؛ ذرة الخط: Bold ؛"> العقدة في عالم الناس دون الضوضاء. </div>
<div style = "color: Blue ؛ Font-Size: 16px ؛ Font-Weight: Bold ؛"> اسأل Jun He Neng؟ القلب بعيد. </div>
<div style = "color: Blue ؛ Size-Size: 16px ؛ Font-Weight: Bold ؛"> Chichelon East Pences ، انظر Nanshan على مهل. </div>
<div style = "اللون: أزرق ؛ حجم الخط: 16px ؛ ذبابة الخط: Bold ؛"> الجبال واليوم والليل ، والطيور الطيران والعودة. </div>
<div style = "اللون: أزرق ؛ حجم الخط: 16px ؛ weight-font: Bold ؛"> هناك معنى حقيقي بهذه الطريقة ، ونسيه. </div>
<div style = "color:#00aaff ؛ font-size: 15px ؛">
تقدير العمل:
"تحت سياج الكريسانثيموم ، انظر نانشان على مهل" ، هذه جملة شهيرة منذ آلاف السنين.
بسبب المجال الروحي لـ "بعيد القضيب" ، فإنه سوف يلتقط على مهل كارسانثيموم تحت السياج ،
إذا نظرنا إلى الجبال ، فهو مريح للغاية ، وغير عادي!
أدت هاتين الجملتين إلى مزاج الشاعر على مهل في وصف المشهد الموضوعي.
إنه يدل على أن ما يراه الشاعر لا يهدف إلى البحث عنه ، بل يجتمع بشكل غير متوقع.
تدعو Su Dongpo تمامًا هاتين الجملتين: "Times of Chrysanthemums ، ورؤية الجبال بطريق الخطأ ، غير راغبة في رؤيتها في البداية ، ولكن الوضع والنية ، لذلك فهو جيد".
كلمة "الرؤية" مفيدة للغاية.
إذا كنت تستخدم كلمة "وانغ" ، فلديك نانشان في قلبك ، لذلك تريد أن تنظر إليها.
ما هو انتصار نانشان ، الذي يمتدح الشاعر كثيرًا؟
التالي هو "الجبال والرياح ، يتم إرجاع الطيور" ، وهو أيضًا المشهد الذي يراه الشاعر عن غير قصد.
في مشهد الغسق الجميل في نانشان ، عادت الطيور الطيران إلى الغابة ، وكانت كل الأشياء حرة ومريحة.
تمامًا مثلما يتخلص الشاعر من ارتباط السلطة الرسمية وهو مجاني ، يدرك الشاعر المعنى الحقيقي للطبيعة والحياة هنا.
"هناك معنى حقيقي ، وتريد التمييز بين الكلمات."
هل تعمل كل الأشياء وتفعل قواعدها الطبيعية؟ هل يتوق إلى المجتمع المثالي من القديم والبسيط والكافي الذاتي؟ هل هي الفلسفة الفلسفية للطبيعة؟
هل هي شخصية صادقة؟ لم يذكر الشعراء بوضوح أنهم أثاروا الأسئلة وطلبوا من القراء التفكير ، وأراد أن يميز نفسه ".
إذا فهمت "jieyu في عالم الشعب وليس ضوضاء سيارة وحصان" ، يمكننا أن نفهم المعنى الحقيقي للحياة ، "المعنى الحقيقي" ،
أي أنه لا ينبغي رسم الحياة في الشهرة والثروة ، ولا ينبغي تشويهها من قبل السلطة الرسمية ، ولكن يجب أن تعود إلى الطبيعة لتقدير النضارة اللانهائية وحيوية الطبيعة!
بطبيعة الحال ، فإن دلالة هذا "المعنى الحقيقي" كبير جدًا.
</div>
</div>
<div id = "easytab_content_1">
<iframe frameborder = "0" scrolling = "auto" src = "http://www.baidu.com"> </frame>
</div>
<div id = "easytab_content_2">
<iframe frameborder = "0" scrolling = "auto" src = "http://www.so.com"> </frame>
</div>
</div>
<script type = "text/javaScript">
document.getElementsByName ("easytab") [0] .click () ؛
</script>
</body>
</html>
ثانياً ، نمط ملف grey.css
نسخ رمز رمز على النحو التالي:
جسم {
خلفية اللون: #CCC ؛
الهامش: 40 بكسل ؛
}
.sytab_area {
الحدود: 1 بكسل Solid #494e52 ؛
خلفية اللون:#636d76 ؛
الحشو: 8px ؛
}
UL.ASYTABS {
الهامش: 16px 0 ؛
Padding: 0 0 0 1px ؛
}
ul.easytabs li {
على غرار القائمة: لا شيء ؛
العرض: مضمّن ؛
}
ul.easytabs li a {
خلفية اللون:#464C54 ؛
اللون:#ffebb5 ؛
الحشو: 16px 14px ؛
تدمير النص: لا شيء ؛
حجم الخط: 14px ؛
Font-Family: Verdana ، Arial ، Helvetica ، Sans-Serif ؛
خط الرصيف: جريئة ؛
الحدود: 1 بكسل Solid #464C54 ؛
}
ul.easytabs li a: hold {
خلفية اللون:#2F343A ؛
بلون الحدود:#2F343A ؛
}
UL.ASYTABS LI A.EASYTAB_ACTION {
خلفية اللون: #ffffff ؛
اللون:#282e32 ؛
الحدود: 1 بكسل Solid #464C54 ؛
Border-Bottom: 2px Solid #ffffff ؛
}
.sytab_content {
خلفية اللون: #ffffff ؛
الحشو: 10 بكسل ؛
الارتفاع: 400 بكسل ؛
}
3. ملف JS EasyTab.js
نسخ رمز رمز على النحو التالي:
/**
*
* param _ هذا العلامات النقر فوق علامات التبويب
* param content_prefix علامة تبويب تتوافق مع بادئة المعرف من div. ملاحظة: فيما يلي نفس البادئات التي يجب أن تكون هي نفسها.
* param نشط لتنشيط الرقم النهائي من معرف Div. ملاحظة: يجب أن يبدأ الرقم المطلوب هنا من الصفر ، وزيادة بدورها 1.
*/
دالة tabswitch2 (_ هذا ، content_prefix ، نشط) {
var tabs = document.getElementSbyName (_this.name) ؛
var number = tabs.length ؛
لـ (var i = 0 ؛ i <number ؛ i ++) {
var tab = tabs [i] ؛
tab.className = "" ؛
document.getElementById (content_prefix+i) .style.display = 'none' ؛
}
_this.className = "easytab_active" ؛
document.getElementById (content_prefix+Active) .style.display = 'block' ؛
}
إنه ما سبق. ملخص:
أولاً ، يمكن أيضًا تحسين النمط ، مثل إضافة بعض صور الخلفية.
ثانياً ، يتم تحميل علامة التبويب هنا على جميع صفحات علامة التبويب في وقت واحد ، وبعد ذلك يمكنك عرض صفحة علامة التبويب التي يتم عرضها وغيرها من الخفي. في الواقع ، يمكنك تعيين محتويات صفحة علامة التبويب على iframe ، ثم تعيين قيمة SRC إليها ديناميكيًا ، ويمكنك تحديث المحتوى الذي يمكن الوصول إليه.