Недавно я часто использую вкладки, поэтому я написал простой.
Сначала посмотрите на рисунок эффекта:
Далее, посмотрите, как написан код:
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>
<голова>
<base href = "<%= basepath%>">
<TILE> My JSP 'Tab.jsp' Страница «/Название»>
<meta http-equiv = "progma" content = "no-cache">
<meta http-equiv = "cache-control" content = "no-cache">
<meta http-equiv = "истекает" content = "0">
<meta http-eviv = "Keywords" content = "Keyword1, Keyword2, Keyword3">
<meta http-equiv = "description" 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>
<тело>
<div>
<ul>
<li> <a name = "easytab" onclick = "tabswitch2 (это, 'easytab_content _', 0);"> поэзия </a> </li>
<li> <a name = "easytab" onclight = "tabswitch2 (this, '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; размер шрифта: 14px;"> Поэзия знаменитое предложение "выбирает хризантема под забором, см. Наншан неторопливо".
<div style = "Цвет: синий; размер шрифта: 16px; font-weight: bold;"> пить </div>
<div style = "color: blue; размер шрифта: 16px; font-weight: bold;"> Узел находится в царстве народа без шума. </div>
<div style = "Цвет: синий; размер шрифта: 16px; font-weight: bold;"> спросить Jun he neng? Сердце далеко. </div>
<div style = "color: blue; размер шрифта: 16px; font-weight: bold;"> Заборы Чишелона Восточного, см. Наншан неторопливо. </div>
<div style = "color: синий; размер шрифта: 16px; font-weight: жирный;"> горы и день и ночь, летающие птицы и возвращение. </div>
<div style = "Цвет: синий; размер шрифта: 16px; font-weight: жирный;"> Таким образом есть истинное значение, и забыто. </div>
<div style = "color:#00aaff; font-size: 15px;">
Оценка работы:
«Под забором хризантемы см. Наншан неторопливо», это известное предложение на протяжении тысячелетий.
Из -за духовной сферы «далекого дурака», оно неторопливо поднимет хризантема под забором,
Глядя на горы, это так удобно, так необычно!
Эти два предложения отказались от неторопливого настроения поэта в описании объективных пейзажей.
Это показывает, что то, что видит поэт, предназначено не для того, чтобы искать, а для неожиданной встречи.
Су Донгпо довольно называет эти два предложения: «Время хризантемы, случайно видя горы, не желая видеть их в начале, но ситуация и намерение, так что это хорошо».
Слово «видение» также очень полезно.
Если вы используете слово «Ван», у вас есть Наншан в вашем сердце, поэтому вы хотите посмотреть на него.
Какова победа Наншана, которая так хвалит поэта?
Далее следует «горы и ветры, птицы возвращаются», что также является пейзажем, которые поэт видит непреднамеренно.
В прекрасных сумерках Наншан летающие птицы улетели обратно в лес, и все было бесплатным и удобным.
Точно так же, как поэт избавляется от связывания чиновника и свободен, поэт осознает истинное значение природы и жизни здесь.
«Существует истинное значение, и вы хотите различить слова».
Это все, что работает и делает свои собственные естественные правила? Тратнет ли это идеальное общество древнего и простого и самодостаточного? Это философская философия природы?
Это искренний персонаж? Поэты не четко заявили, что они только что подняли вопросы и попросили читателей подумать, и он «хотел различить себя».
Если вы понимаете предыдущий «jieyu в царстве народа и без автомобиля и лошадей», мы можем понять истинное значение жизни, «Истинное значение»,
То есть жизнь не должна быть привлечена в славу и удаче, и не должна быть запятнана официальным числами официального лица, но должна вернуться к природе, чтобы оценить бесконечную свежесть и жизнеспособность природы!
Конечно, коннотация этого «истинного значения» очень велика.
</div>
</div>
<div id = "easytab_content_1">
<iframe frameborder = "0" scolling = "auto" src = "http://www.baidu.com"> </iframe>
</div>
<div id = "easytab_content_2">
<iframe frameborder = "0" scolling = "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;
Заполнение: 8px;
}
ul.easytabs {
Полевая: 16px 0;
Надо: 0 0 0 0 1PX;
}
ul.easytabs li {
Список стиля: нет;
дисплей: inline;
}
ul.easytabs li a {
фоновый цвет:#464C54;
Цвет:#ffebb5;
Заполнение: 16px 14px;
Текстовое декорация: нет;
размер шрифта: 14px;
Семейство шрифта: Вердана, Ариал, Хельветика, Санс-Сэриф;
Шрифт-вес: жирный шрифт;
Граница: 1PX SOLID #464C54;
}
ul.easytabs li a: hold {
фоновый цвет:#2F343A;
Пограничный цвет:#2F343A;
}
ul.easytabs li a.easytab_active {
фоновый цвет: #ffffff;
Цвет:#282E32;
Граница: 1PX SOLID #464C54;
Пограничный подвод: 2px solid #ffffff;
}
.sytab_content {
фоновый цвет: #ffffff;
Заполнение: 10px;
Высота: 400px;
}
3. JS File easytab.js
Код кода копирования следующим образом:
/**
*
* @param _this tabe tabs
* @Param Content_prefix Tag Tag соответствует префиксу ID Div. Примечание. Вот те же префиксы, которые должны быть одинаковыми.
* @param Active, чтобы активировать окончательный номер идентификатора Div. ПРИМЕЧАНИЕ. Число необходимого здесь должно начинаться с нуля и увеличение в 1 -м.
*/
Функция tabswitch2 (_this, content_prefix, active) {
var tabs = document.getElementsbyname (_this.name);
var number = tabs.length;
для (var i = 0; i <number; i ++) {
var tabs = 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, и вы можете обновить, каким контентом можно достичь.