최근에 나는 종종 탭 탭 페이지를 사용하므로 향후에 사용하면 직접 복사하고 약간 변경하십시오.
먼저 효과 도면을 살펴보십시오.
다음으로 코드가 작성되는 방법을 살펴보십시오.
1. SP FileSyTab.jsp
다음과 같이 코드 코드를 복사하십시오.
<%@ page language = "java"image = "java.util.*"pageencoding = "utf-8"%>
<%
문자열 path = request.getContextPath ();
String BasePath = request.getScheme ()+": //"+"+"+requestServerName ()+":"+requestServerport ()+path+"/";
%>
<doctype html public "-// w3c // dtml 4.01 과도기 // en">>
<html>
<헤드>
<base href = "<%= basepath%>">
<title> 내 jsp 'tab.jsp'시작 페이지 </title>
<meta http-equiv = "progma"content = "no-cache">
<meta http-equiv = "캐시 제어"content = "no-cache">
<meta http-equiv = "만료"내용 = "0">
<meta http-equiv = "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>
<body>
<div>
<ul>
<li> <이름 = "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 = "color :#78bbaf; font-size : 14px;">시 유명한 문장 "울타리 아래의 국화를 선택합니다.
<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에게 jun에게 물어? 마음은 멀리 떨어져 있습니다. </div>
<div style = "color : blue; font-size : 16px; font-weight : bold;"> Chichelon East 울타리, Nanshan Leisurely를 참조하십시오. </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 = "색상 :#00aaff; font-size : 15px;">
작업에 대한 감사 :
"국화의 울타리 아래에서 Nanshan Leisurely를 참조하십시오."이것은 수천 년 동안 유명한 문장입니다.
"먼 마음"의 영적 영역으로 인해 울타리 아래에 가해자를 여유롭게 집어 올 것입니다.
산을 올려다 보면 너무 편안하고 특별합니다!
이 두 문장은 객관적인 풍경에 대한 설명에서 시인의 여유로운 분위기를 시작했습니다.
그것은 시인이 보는 것이 추구하려는 것이 아니라 예기치 않게 만나기 위해 의도된다는 것을 보여줍니다.
Su Dongpo는 다음과 같은 두 문장을 꽤 많이 부르고 있습니다.
"보는 것"도 매우 유용합니다.
"Wang"이라는 단어를 사용한다면, 당신은 당신의 마음에 Nanshan을 가지고 있기 때문에, 당신은 그것을보고 싶어서, 당신은 기회를 잊어 버리는 일종의 결백을 잃게 될 것입니다.
시인을 너무 찬양하는 Nanshan의 승리는 무엇입니까?
다음은 "산과 바람, 새들이 돌아 오는 것"이며, 시인이 우연히 볼 수있는 풍경이기도합니다.
Nanshan의 아름다운 황혼 경치에서 날아 다니는 새들이 숲으로 날아 갔으며 모든 것이 자유롭고 편안했습니다.
시인이 공식의 구속력을 없애고 자유로운 것처럼, 시인은 여기서 자연과 삶의 진정한 의미를 깨닫습니다.
"진정한 의미가 있으며, 당신은이 자연적인 새, Nanshan, Sunset 및 Autumn Chrysanthemum에서 시인이 무엇을 깨달았습니까?
모든 것이 운영되고 있으며 자연스러운 규칙을 수행 하는가? 고대적이고 단순하고 자기 만족의 이상적인 사회를 갈망하고 있습니까? 그것은 자연의 철학적 철학입니까?
성실한 캐릭터입니까? 시인들은 단지 질문을 제기하고 독자들에게 생각을 요청했다고 분명히 언급하지 않았으며 "자신을 구별하기를 원했습니다."
이전 "사람들의 영역에서 Jieyu와 자동차와 말 소음이 없음"을 이해한다면, 우리는 삶의 진정한 의미, "진정한 의미"를 이해할 수 있습니다.
즉, 생명은 명성과 재산으로 이끌어 져서는 안되며, 공식의 공무원에 의해 변색되어서는 안되며, 자연의 신선함과 자연의 활력을 인식하기 위해 자연으로 돌아와야합니다!
물론,이 "진정한 의미"의 의미는 모두 그것을 말하지 않았으며,이 두 철학적 결절은 독자들에게 끝없는 상상력의 상상력을 주었다.
</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 (); // 첫 번째 레이블을 클릭하십시오.
</스크립트>
</body>
</html>
둘째, 스타일 파일 grey.css
다음과 같이 코드 코드를 복사하십시오.
몸 {
배경색 : #CCC;
여백 : 40px;
}
.sytab_area {
국경 : 1px 고체 #494E52;
배경색 :#636d76;
패딩 : 8px;
}
ul.easytabs {
여백 : 16px 0;
패딩 : 0 0 0 1px;
}
ul.easytabs li {
목록 스타일 : 없음;
디스플레이 : 인라인;
}
ul.easytabs li a {
배경색 :#464C54;
색상 :#ffebb5;
패딩 : 16px 14px;
텍스트 결정 : 없음;
글꼴 크기 : 14px;
Font-Family : Verdana, Arial, Helvetica, Sans-serif;
글꼴 중량 : 대담한;
국경 : 1px 고체 #464c54;
}
ul.easytabs li a : hold {
배경색 :#2F343A;
국경 색상 :#2F343A;
}
ul.easytabs li a.easytab_active {
배경색 : #ffffff;
색상 :#282E32;
국경 : 1px 고체 #464c54;
국경-바닥 : 2px 솔리드 #ffffff;
}
.sytab_content {
배경색 : #ffffff;
패딩 : 10px;
높이 : 400px;
}
3. JS 파일 EasyTab.js
다음과 같이 코드 코드를 복사하십시오.
/**
*
* @param _this 탭 태그를 클릭했습니다
* @param content_prefix 탭 태그는 div의 id 접두사에 해당합니다. 참고 : 다음은 동일한 접두사가 동일해야합니다.
* @Param DIV의 ID의 최종 번호를 활성화하려면 활성화됩니다. 참고 : 여기에서 필요한 숫자는 처음부터 시작해야하며 턴 1이 증가해야합니다.
*/
함수 tabswitch2 (_this, content_prefix, active) {
var tabs = document.getElementsByName (_this.name);
var 번호 = tabs.length;
for (var i = 0; i <번호; i ++) {
var 탭 = 탭 [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의 값을 동적으로 설정하고 도달 할 수있는 컨텐츠를 새로 고칠 수 있습니다.