최근에는 탭을 자주 사용하기 때문에, 나중에 사용하게 된다면 복사해서 몇 가지만 수정해 주시면 됩니다.
먼저 렌더링을 살펴보세요:
그런 다음 코드가 어떻게 작성되었는지 살펴보겠습니다.
1.sp 파일 easytab.jsp
코드 복사 코드는 다음과 같습니다.
<%@ page 언어="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
문자열 경로 = request.getContextPath();
String basePath = request.getScheme() "://" request.getServerName() ":" request.getServerPort() 경로 "/";
%>
<머리>
诗词name句“采菊东篱下,悠然见南山。”출자 代诗人陶渊明的 《饮酒》
饮酒
结庐在人境,而无车马喧。
问君何能尔?心远地自偏。
采菊东篱下,悠然见南山。
山气日夕佳,飞鸟相与还。
此中有真意,欲辨已忘言。
작품 설명:
“采菊东篱下,悠然见南山”,这是千年以来脍炙人亮的名句.
因为有了“心远地自偏”的精神境界,才会悠闲地에서 아래에서,
抬头见山,是那样地怡然自得,那样地超凡脱俗!适心情,“悠然”이자용得很妙,
说明诗人所见所感,不有意寻求,而是不期而遇。
苏东坡对这两句颇为称道:“采菊之次,偶然见山,初사용하지 않음 ,而境与意会,故可喜也。”
“见”字也用得极妙,“见”是无意中的偶见,南山的美景正好与采菊时悠然自得的心境映衬,合成物我两忘的“无我の境”.
如果用“望”字,便是心中先有南山,才有意去望,成了“有我之境”,就失去了一种忘机的天真意趣。
南山究竟有什么胜景,致使诗人如此赞美呢?
接下去就是“山气日夕佳,飞鸟与还”,这也是诗人无意中看见的景color,
南山那美好的黄昏景color中,飞鸟结伴飞返山木,万물自由自재,适性而动,
Easy Image诗人摆脱官场束缚,悠然自재,诗人在这里悟流了自然界和人生的真谛。
“此中有真意,欲辨已忘言。”诗人从这大自然的飞鸟、南山、夕阳、秋菊中悟take了什么真意呢?法则吗?是对远古纯朴自足的然自然的人生哲理吗?
솔직하고 성실한 성격인가? 시인은 이를 노골적으로 표현하지 않고, 독자들이 생각할 거리를 은연중에 제기하면서 “자신을 구별하고 싶었으나 말하는 것을 잊어버렸다”고 말했다.
이전 문장인 "집은 마차와 말의 소음이 없는 인간 환경에 있다"와 연관지어 이해한다면, "진정한 의미"는 삶의 진정한 의미로 이해될 수 있습니다.
즉, 인생은 명예와 부에 집착해서는 안 되며, 타인의 더러움이 자신의 본성을 더럽혀서는 안 되며, 오히려 자연으로 돌아가 그 무한한 신선함과 생명력을 감상해야 한다는 것입니다.
물론 이 '진정한 의미'는 큰 함축을 담고 있다. 저자가 다 말한 것도 아니고, 굳이 말할 필요도 없는 이 두 가지 철학적 요약은 독자들에게 상상의 여지를 충분히 주고 끝없는 뒷맛을 선사한다.
2. 스타일 파일 grey.css
코드 복사 코드는 다음과 같습니다.
body {
배경색:#ccc;
여백:40px;
.easytab_area {
경계:1px 단색
배경색:#636d76; 🎜>padding: 8px;
}
ul.easytabs {
margin:16px 0;
padding:0 0 0 1px;
ul.easytabs li {
목록 스타일: 없음;
디스플레이:인라인
}
ul.easytabs li a {
배경색:#464c54
색상:#ffebb5; 14px; 텍스트 장식:없음;
글꼴 크기:14px;
글꼴 계열:Verdana, Arial, Helvetica, sans-serif
글꼴 무게:bold; :1px solid # 464c54;
ul.easytabs li a:hover {
background-color:#2f343a
border-color:#2f343a
ul. easytabs li a. easytab_active {
color:#282e32;
border:1px solid #464c54;border-bottom: 2px solid
}
.easytab_content {
배경색:#ffffff;
높이:400px;
}
3. easytab.js
코드 복사
코드는 다음과 같습니다.
/**
*
* @param _this 클릭한 탭 레이블
* @param content_prefix 탭 레이블에 해당하는 p의 id 접두어입니다. 참고: 여기에 있는 모든 접두사는 동일해야 합니다.
* @param active 활성화할 p의 id 마지막 숫자입니다. 참고: 여기에 있는 숫자는 0부터 시작하여 1씩 증가해야 합니다.
*/
function tabSwitch2(_this, content_prefix,active) {
var tabs = document.getElementsByName(_this.name); var number = tabs.length for (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';
}
그렇습니다. 마지막으로 요약하자면:
1. 배경 이미지를 추가하는 등 스타일을 최적화할 수도 있습니다.
2. 여기 탭 태그는 모든 탭 페이지를 한 번에 로드한 다음 표시할 탭 페이지를 클릭하고 다른 탭 페이지는 숨깁니다. 실제로 탭 페이지의 모든 콘텐츠를 iframe으로 설정한 다음, 이에 대한 src 값을 동적으로 설정하면 클릭에 따라 콘텐츠가 새로 고쳐질 수 있습니다.