純css+js寫(xiě)的一個(gè)簡(jiǎn)單的tab標(biāo)簽頁(yè)帶樣式

更新時(shí)間：2014年01月28日 15:31:21 作者：

最近經(jīng)常要用tab標(biāo)簽頁(yè)，于是就寫(xiě)了一個(gè)簡(jiǎn)單的tab標(biāo)簽頁(yè)，純css+js寫(xiě)的，帶樣式。大家可以參考下

最近經(jīng)常要用tab標(biāo)簽頁(yè)，所以寫(xiě)了一個(gè)簡(jiǎn)單的，以后用的話直接拷貝一個(gè)，稍微改改就OK了。

先看效果圖：

接下來(lái)看下代碼怎么寫(xiě)的吧：

一、sp文件easytab.jsp

復(fù)制代碼代碼如下:

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
<% 
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<base href="<%=basePath%>"> 

<title>My JSP 'tab.jsp' starting page</title> 

<meta http-equiv="pragma" content="no-cache"> 
<meta http-equiv="cache-control" content="no-cache"> 
<meta http-equiv="expires" content="0"> 
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="This is my page"> 

<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 class="easytab_area"> 
<ul class="easytabs"> 
<li><a name="easytab" class="easytab_active" onclick="tabSwitch2(this,'easytab_content_',0);">詩(shī)詞</a></li> 
<li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',1);">百度</a></li> 
<li><a name="easytab" onclick="tabSwitch2(this,'easytab_content_',2);">360搜索</a></li> 
</ul> 

<div id="easytab_content_0" class="easytab_content"> 
<div style="color:#78bbaf;font-size:14px;">詩(shī)詞名句“采菊東籬下，悠然見(jiàn)南山?！背鲎詴x代詩(shī)人陶淵明的《飲酒》</div> 
<div style="color:blue;font-size:16px;font-weight: bold;"> 飲酒</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">結(jié)廬在人境，而無(wú)車馬喧。</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">問(wèn)君何能爾？心遠(yuǎn)地自偏。</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">采菊東籬下，悠然見(jiàn)南山。</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">山氣日夕佳，飛鳥(niǎo)相與還。</div> 
<div style="color:blue;font-size:16px;font-weight: bold;">此中有真意，欲辨已忘言。</div> 
<div style="color:#00aaff;font-size:15px;"> 
作品賞析： 
“采菊東籬下，悠然見(jiàn)南山”,這是千年以來(lái)膾炙人口的名句。 
因?yàn)橛辛恕靶倪h(yuǎn)地自偏”的精神境界，才會(huì)悠閑地在籬下采菊， 
抬頭見(jiàn)山，是那樣地怡然自得，那樣地超凡脫俗！ 
這兩句以客觀景物的描寫(xiě)襯托出詩(shī)人的閑適心情，“悠然”二字用得很妙， 
說(shuō)明詩(shī)人所見(jiàn)所感，非有意尋求，而是不期而遇。 
蘇東坡對(duì)這兩句頗為稱道：“采菊之次，偶然見(jiàn)山，初不用意，而境與意會(huì)，故可喜也?！?
“見(jiàn)”字也用得極妙，“見(jiàn)”是無(wú)意中的偶見(jiàn)，南山的美景正好與采菊時(shí)悠然自得的心境相映襯，合成物我兩忘的“無(wú)我之境”。 
如果用“望”字，便是心中先有南山，才有意去望，成了“有我之境”，就失去了一種忘機(jī)的天真意趣。 
南山究竟有什么勝景，致使詩(shī)人如此贊美呢？ 
接下去就是“山氣日夕佳，飛鳥(niǎo)相與還”，這也是詩(shī)人無(wú)意中看見(jiàn)的景色， 
在南山那美好的黃昏景色中，飛鳥(niǎo)結(jié)伴飛返山林，萬(wàn)物自由自在，適性而動(dòng)， 
正像詩(shī)人擺脫官場(chǎng)束縛，悠然自在，詩(shī)人在這里悟出了自然界和人生的真諦。 
“此中有真意，欲辨已忘言?！痹?shī)人從這大自然的飛鳥(niǎo)、南山、夕陽(yáng)、秋菊中悟出了什么真意呢？ 
是萬(wàn)物運(yùn)轉(zhuǎn)、各得其所的自然法則嗎？是對(duì)遠(yuǎn)古純樸自足的理想社會(huì)的向往嗎？是任其自然的人生哲理嗎？ 
是直率真摯的品格嗎？詩(shī)人都沒(méi)有明確地表示，只是含蓄地提出問(wèn)題，讓讀者去思考，而他則“欲辨己忘言”。 
如果結(jié)合前面“結(jié)廬在人境，而無(wú)車馬喧”來(lái)理解，“真意”我們可以理解為人生的真正意義， 
那就是人生不應(yīng)該汲汲于名利，不應(yīng)該被官場(chǎng)的齷齪玷污了自己自然的天性，而應(yīng)該回到自然中去，去欣賞大自然的無(wú)限清新和生機(jī)勃勃！ 
當(dāng)然，這個(gè)“真意”的內(nèi)涵很大，作者沒(méi)有全部說(shuō)出來(lái)，也無(wú)須說(shuō)出來(lái)，這兩句哲理性的小結(jié)給讀者以言已盡而意無(wú)窮的想象余地，令人回味無(wú)窮。 
</div> 
</div> 
<div id="easytab_content_1" class="easytab_content"> 
<iframe width="100%" height="100%" frameborder="0" scrolling="auto" src="http://www.baidu.com"></iframe> 
</div> 
<div id="easytab_content_2" class="easytab_content"> 
<iframe width="100%" height="100%" frameborder="0" scrolling="auto" src="http://www.so.com"></iframe> 
</div> 
</div> 
<script type="text/javascript"> 
document.getElementsByName("easytab")[0].click();//頁(yè)面加載完成后，點(diǎn)擊第一個(gè)標(biāo)簽 
</script> 
</body> 
</html> 

二、樣式文件grey.css

復(fù)制代碼代碼如下:

 
body { 
background-color:#ccc; 
margin:40px; 
} 
.easytab_area { 
border:1px solid #494e52; 
background-color:#636d76; 
padding:8px; 
} 
ul.easytabs { 
margin:16px 0; 
padding:0 0 0 1px; 
} 
ul.easytabs li { 
list-style:none; 
display:inline; 
} 
ul.easytabs li a { 
background-color:#464c54; 
color:#ffebb5; 
padding:16px 14px; 
text-decoration:none; 
font-size:14px; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-weight:bold; 
border:1px solid #464c54; 
} 
ul.easytabs li a:hover { 
background-color:#2f343a; 
border-color:#2f343a; 
} 
ul.easytabs li a.easytab_active { 
background-color:#ffffff; 
color:#282e32; 
border:1px solid #464c54; 
border-bottom: 2px solid #ffffff; 
} 
.easytab_content { 
background-color:#ffffff; 
padding:10px; 
height:400px; 
} 

三、js文件easytab.js

復(fù)制代碼代碼如下:

 
/** 
* 
* @param _this 所點(diǎn)擊的tab標(biāo)簽 
* @param content_prefix tab標(biāo)簽所對(duì)應(yīng)div的id前綴。注：這里要求所有的前綴必須一樣。 
* @param active 所要激活div的id最后的數(shù)字。注：這里要求數(shù)字必須從零開(kāi)始，依次增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'; 
} 

就是以上這些了。最后總結(jié)一下：

一、樣式還可以優(yōu)化，比如加一些背景圖片。
二、這里的tab標(biāo)簽是一次加載所有tab頁(yè)，然后，點(diǎn)擊哪個(gè)tab頁(yè)就顯示哪個(gè)，其它的隱藏。其實(shí)可以把tab頁(yè)的內(nèi)容都設(shè)置為iframe，然后動(dòng)態(tài)給其設(shè)置src的值，就可以達(dá)到點(diǎn)哪個(gè)就刷新哪個(gè)內(nèi)容了。

您可能感興趣的文章: