网上搜到的一个tab选项卡,感觉不错,收藏了.呵呵
<!
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html
xmlns
="http://www.w3.org/1999/xhtml"
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=gb2312"
/>
<
title
>
▒ 恋婷滑动门技术
</
title
>
<
style
media
="screen"
type
="text/css"
>
...
<!-- *{...} { font-size : 12px ; } html,body{...} { margin : 0 ; text-align : center ; over-flow : hidden ; height : 100% ; width : 100% ; } UL{...} { list-style-type : none ; margin : 0px ; } /**/ /* 标准盒模型 */ .ttl{...} { height : 18px ; } .ctt{...} { height : auto ; padding : 6px ; clear : both ; border : 1px solid #064ca1 ; border-top : 0 ; text-align : left ; } .w936{...} { margin : 2px 0 ; clear : both ; width : 936px ; /**/ /* 这里调整整个滑动门的宽度 */ } /**/ /* TAB 切换效果 */ .tb_{...} { background-image : url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_b6d924afad052649402dWs8adqAyLtgi.gif') ; background-repeat : repeat-x ; background-color : #E6F2FF ; } .tb_ ul{...} { height : 24px ; } .tb_ li{...} { float : left ; height : 24px ; line-height : 1.9 ; width : 94px ; cursor : pointer ; } /**/ /* 用于控制显示与隐藏的css类 */ .normaltab {...} { background-image : url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_1bd9c293199c87ac974auuJXlsPMeKDq.gif') ; background-repeat : no-repeat ; color : #1F3A87 ; } .hovertab {...} { background-image : url('http://bbs.blueidea.com/attachments/2007/4/29/20070429_55976880c7b020703a18yOxpDn5WBaHd.gif') ; background-repeat : no-repeat ; color : #1F3A87 ; font-weight : bold } .dis{...} { display : block ; } .undis{...} { display : none ; } -->
</
style
>
<
script
type
="text/javascript"
language
="javascript"
>
...
// <!CDATA[ function g(o) ... { return document.getElementById(o);} if (document.attachEvent) ... { addEvent = function (o,evn,f) ... {o.attachEvent( " on " + evn,f)} }else if (document.addEventListener) ... { addEvent = function (o,evn,f) ... {o.addEventListener(evn,f, false )} }/**/ /* * * 功能:选项卡 * @param {String} nid 导航栏容器的id,导航栏里必须是li,至于是ul还是li就看个人喜好了 * @param {String} cid 内容容器的id,内容容器里的第一层子节点(排除文本节点)都将作为内容处理 * @param {String} action 操作,单击或鼠标移动 * @param {integer} defaultIndex 默认选中第几个选项卡,如果数字非法或者未提供数字则默认第一个 * @exception 当导航栏和内容数量不对应时抛出错误 * @author Sheneyan */ function initTab(nid,cid,action,defaultIndex) ... { var ls = g(nid).getElementsByTagName( ' li ' ); var cc = g(cid).childNodes; var c = []; var index = defaultIndex ? defaultIndex: 0 ; for ( var i = 0 ; i < cc.length ; i ++ ) if (cc[i].nodeType == 1 )c.push(cc[i]); if (ls.length != c.length) throw ( ... {description: ' 菜单和内容数量不对应 ' } ); for ( var i = 0 ; i < ls.length ; i ++ ) ... { ls[i].index = i; if (i == index) ... { ls[i].className = ' hovertab ' ; c[i].className = ' dis ' ls[i].parentNode.last = ls[i]; } addEvent(ls[i],action,function (e) ... { var self = window.event ? window.event.srcElement:e ? e.target: null ; if (self.parentNode.last) ... { self.parentNode.last.className = ' normaltab ' ; c[self.parentNode.last.index].className = ' undis ' ; } ; self.className = ' hovertab ' ; c[self.index].className = ' dis ' ; self.parentNode.last = self; } ); } }// ]]>
</
script
>
</
head
>
<
body
onload
="initTab('nav','cont','mouseover');initTab('nav2','cont2','click',2)"
>
<
div
class
="w936"
>
<
div
id
="nav"
class
="tb_"
>
<
ul
>
<
li
class
="normaltab"
>
流行音乐
</
li
>
<
li
class
="normaltab"
>
美女写真
</
li
>
<
li
class
="normaltab"
>
平面设计
</
li
>
<
li
class
="normaltab"
>
网络学堂
</
li
>
<
li
class
="normaltab"
>
恋爱宝典
</
li
>
<
li
class
="normaltab"
>
Q小鸽子
</
li
>
</
ul
>
</
div
>
<
div
class
="ctt"
id
="cont"
>
<
div
class
="undis"
>
流行音乐 的内容
</
div
>
<
div
class
="undis"
>
美女写真 的内容
</
div
>
<
div
class
="undis"
>
平面设计 的内容
</
div
>
<
div
class
="undis"
>
网络学堂 的内容
</
div
>
<
div
class
="undis"
>
恋爱宝典 的内容
</
div
>
<
div
class
="undis"
><
b
>
[Q小鸽子] 的内容
</
b
><
br
/>
</
div
>
</
div
>
</
div
>
<
div
class
="w936"
>
<
div
id
="nav2"
class
="tb_"
>
<
ul
>
<
li
class
="normaltab"
>
流行音乐
</
li
>
<
li
class
="normaltab"
>
美女写真
</
li
>
<
li
class
="normaltab"
>
平面设计
</
li
>
<
li
class
="normaltab"
>
网络学堂
</
li
>
<
li
class
="normaltab"
>
恋爱宝典
</
li
>
<
li
class
="normaltab"
>
Q小鸽子
</
li
>
</
ul
>
</
div
>
<
div
class
="ctt"
id
="cont2"
>
<
div
class
="undis"
>
流行音乐 的内容
</
div
>
<
div
class
="undis"
>
美女写真 的内容
</
div
>
<
div
class
="undis"
>
平面设计 的内容
</
div
>
<
div
class
="undis"
>
网络学堂 的内容
</
div
>
<
div
class
="undis"
>
恋爱宝典 的内容
</
div
>
<
div
class
="undis"
><
b
>
[Q小鸽子] 的内容
</
b
><
br
/>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>