JS+CSS实现WEB页选项卡式效果

效果:

源码:

<head>

/*公用样式*/

html {background:#fff;font-size:12px;margin:0px;padding:0px;text-align:center;font-family: "Arial", "Helvetica", "sans-serif";}

body {width:500px;margin:10px auto;padding:10px;background:#FFFFFF;}

.tapItems {background:url(http://www.2mysite.net/images/bgTap01.gif) repeat;text-align:left;height:26px;}

.tapItem1 {background:url(http://www.2mysite.net/images/bgTap03.gif) repeat;text-align:center;height:18px; width:81px; padding-top:8px;float:left;}

.tapItem2 {background:url(http://www.2mysite.net/images/bgTap02.gif) repeat;text-align:center;height:18px; width:81px; padding-top:8px;float:left;}

.photocolorblock { background:#D8ECFA;font-size: 1px; height:8px;}

.photobox {border-bottom:#6AB2E4 1px solid;border-left:#6AB2E4 1px solid;border-right:#6AB2E4 1px solid;}

.fontclear { clear: both; font-size: 1px; visibility: hidden; width: 1px; line-height:1px; }

.tapList {text-align:left; padding:6px 20px; width:92%;}

</style>

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_showHideLayers() { //v6.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v;

if (v == 'hidden') { obj.display = 'none';}

if (v == 'visible') {obj.display = 'block'} }

obj.visibility=v; }

}

</script>

</head>

<body>

</div>

<ul>

<li><a href="#">选项卡一内容</a></li>

</ul>

</div>

</div>

<ul>

<li><a href="#">选项卡二内容</a></li>

</ul>

</div>

</div>

<ul>

<li><a href="#">选项卡三内容</a></li>

</ul>

</div>

</div>

<ul>

<li><a href="#">选项卡四内容</a></li>

</ul>

</div>

</div>

<ul>

<li style="display:NONE"><a href="#">选项卡五内容</a></li>

</ul>

</div>

</div>

</body>

</html>

实例二：

<html>

<head>

<title>WebTable Sample</title>

function doClick(index, numTabs, id) {

document.all(id, index).className = "tab";

for (var i=1; i < numTabs; i++) {

document.all(id, (index + i) % numTabs).className = "backtab";

}

document.all(id, index).style.display = "";

for (var j=1; j < numTabs; j++) {

document.all(id, (index + j) % numTabs).style.display = "none";

}

</script>

<style>

td.code {

padding-left:10px;

padding-right:10px;

padding-top:0px;

padding-bottom:0px;

border-left: 1px solid #B1B1B1;

border-bottom: 1px solid #DADADA;

border-top: none;

border-right: 1px solid #DADADA;

}

td.tab {

text-align:center;

font: verdana;

width:15%;

border-top: 1px solid #B1B1B1;

border-bottom: none;

border-left: 1px solid #B1B1B1;

cursor: hand;

background: #F0F0F0;

padding: 3px;

}

td.backtab {

text-align: center;

font: verdana;

width: 15%;

border-top: 1px solid #B1B1B1;

border-right: none;

border-bottom: 1px solid #B1B1B1;

border-left: 1px solid #B1B1B1;

cursor: hand;

background: #E3E3E3;

padding: 3px;

}

td.space {

width:70%;

font: x-small verdana;

padding: 0px 0px 0px 0px;

border-top: none;

border-right: none;

border-bottom: 1px solid #B1B1B1;

border-left: 1px solid #B1B1B1;

background: white;

}

</style>

</head>

<body>

<tr>

</tr>

<tr>

protected void DataList_EditCommand(object Source, DataListCommandEventArgs e) {

DataList1.EditItemIndex = (int)e.Item.ItemIndex;

BindList();

}

</pre>

Protected Sub DataList_EditCommand(Source As Object, e As DataListCommandEventArgs)

DataList1.EditItemIndex = CType(e.Item.ItemIndex, Integer)

BindList()

End Sub

</pre>

</td>

</tr>

</table>

</body>

</html>

效果如下：

实例三

<html>

<head>

</head>

<style>

<!--

body, form, ul, h1, h2, h3, h4, div, h5, h6, p, a, td, button, select {

font-family: tahoma, verdana, arial;

margin: 0;

padding: 0;

z-index: 1;

}

body {

font-size: 8pt;

color: #777;

text-align: center;

background-color:White;

}

#tranTypeTable {

margin: 4px 0 0;

}

#tranTypeLowerTable TD {

padding: 4px 4px 4px 0;

}

.tranType {

padding: 4px 16px 8px;

border: solid 1px #bbb;

}

.selectedTranType {

padding: 4px 16px 8px;

border-top: solid 1px #bbb;

border-left: solid 1px #bbb;

border-right: solid 1px #bbb;

background: #f1f1f1;

}

.tranSpacer {