[CSS+JS]同一页面可以重复使用的选项卡收藏-优快云博客

本文介绍了一种选项卡的设计与实现方法，通过HTML和CSS构建布局，并使用JavaScript实现交互效果。选项卡包含日志、相册、分享和群组四个部分，展示了不同类型的展示效果。

<! 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 type ="text/css" >

<!--

/**//* 初始化 */

body {

}{

font: 12px/1 "宋体", SimSun, serif;

background:#fff;

color:#000;

}

ul,

li,

dl,

dt,

dd {

}{

margin:0;

padding:0; /**//* 清除浏览器默认的margin和padding值 */

}

ul,

li {

}{

list-style:none outside; /**//* 清除浏览器中列表项默认的占位 */

}

a {

}{

text-decoration:none;

}

img {

}{

border:0;

}

/**//* 选项卡整体外观定义 */

.tabList {

}{

width:400px;

height:160px;

overflow:hidden;

}

.tabList .tabBox {

}{

height:100%;

position:relative;

background:#09c;

}

.tabList .tabBox li {

}{

float:left;

width:25%;

text-align:center;

}

.tabList h4 {

}{

margin:0;

height:26px;

font-size:1em;

line-height:22px;

}

.tabList h4 a {

}{

color:#039;

font-weight:normal;

display:block;

background:#bfeafd url(img/tabList_btn.png) no-repeat;

padding-left:5px;

}

.tabList h4 a span {

}{

display:block;

background:url(img/tabList_btn.png) no-repeat top right;

padding-right:5px;

}

.tabList h4 a:hover,

.tabList .tabOn h4 a{

}{

background-position:0 -50px;

}

.tabList h4 a:hover span,

.tabList .tabOn h4 a span {

}{

background-position:right -50px;

}

.tabList .tabContentBox li{

}{

width:auto;

margin-top:0;

}

.tabList .tabContentBox {

}{

width:390px;

height:130px;

border:1px solid #069;

text-align:left;

overflow:hidden;

background:#fff;

position:absolute;

top:22px;

left:0;

display:none;

margin:4px;

}

.tabList li:hover .tabContentBox,

.tabList .tabOn .tabContentBox {

}{

display:block;

}

/**//* 以下是对各项内容的CSS定义 */

.tabList .tabContentBox .blog,

.tabList .tabContentBox .group {

}{

color:#999;

line-height:2em;

margin:5px;

}

.tabList .tabContentBox .blog dt,

.tabList .tabContentBox .group dt,

.tabList .tabContentBox .blog dd,

.tabList .tabContentBox .group dd{

}{

float:left;

border-bottom: 1px dotted #9cf;

}

.tabList .tabContentBox .blog dt,

.tabList .tabContentBox .group dt {

}{

width:60%;

white-space:nowrap;

overflow:hidden;

clear:left;

font-size:1.1em;

}

.tabList .tabContentBox .blog dt a,

.tabList .tabContentBox .group dt a {

}{

color:#039;

display:block;

margin-left:5px;

padding-left:12px;

background: url(img/tabList_icon1.png) no-repeat 5px 11px;

}

.tabList .tabContentBox .blog dt a:hover,

.tabList .tabContentBox .group dt a:hover {

}{

color:#f90;

background-position:5px -19px;

}

.tabList .tabContentBox .blog dd,

.tabList .tabContentBox .group dd {

}{

color:#0cf;

width:20%;

float:left;

white-space:nowrap;

overflow:hidden;

}

.tabList .tabContentBox .blog dd a,

.tabList .tabContentBox .group dd a {

}{

color:#069;

}

.tabList .tabContentBox .blog dd a:hover,

.tabList .tabContentBox .group dd a:hover {

}{

color:#f90;

}

.tabList .tabContentBox .album li,

.tabList .tabContentBox .share li{

}{

width:24.9%;

float:left;

padding-top:15px;

text-align:center;

}

-->

</ style >

< script type ="text/javascript" language ="javascript" >

<!--

window.onload = tabEffect;

function tabEffect()

{

var allElements = document.getElementsByTagName('*');

for (var i=0; i<allElements.length; i++)

{

if (allElements[i].className.indexOf('tabOption') >= 0)

{

allElements[i].onmouseover = mouseOver;

}

function mouseOver()

{

tabList = this.parentNode;

tabOptions = tabList.getElementsByTagName("li");

for (var i=0; i<tabOptions.length; i++)

{

if (tabOptions[i].className.indexOf('tabOption') >= 0)

{

tabOptions[i].className = "tabOption";

}

this.className += " tabOn";

}

-->

</ script >

</ head >< body >

< div class ="tabList" id ="tabList1" >

< ul class ="tabBox" >

< li class ="tabOption tabOn" >< h4 >< a href ="http://www.ddcat.net/blog/" title ="单击，跳转到所有[日志]列表" >< span > 日志 </ span ></ a ></ h4 >

< div class ="tabContentBox" >

< dl class ="tabContent blog" >

< dt >< a href ="http://www.ddcat.net/1" title ="日志标题：优秀广告设计，不服不行！" > 优秀广告设计，不服不行！ </ a ></ dt >

< dd class ="name" >< a href ="#11" title ="作者：QUESTER" > QUESTER </ a ></ dd >

< dd > 2009-01-10 </ dd >

< dt >< a href ="http://www.ddcat.net/2" title ="日志标题：Photoshop 的真人动漫效果" > Photoshop 的真人动漫效果 </ a ></ dt >

< dd class ="name" >< a href ="#11" title ="作者：snl" > snl </ a ></ dd >

< dd > 2009-01-10 </ dd >

< dt >< a href ="http://www.ddcat.net/3" title ="日志标题：网站内容结构化探讨" > 网站内容结构化探讨 </ a ></ dt >

< dd class ="name" >< a href ="#11" title ="作者：豆猫" > 豆猫 </ a ></ dd >

< dd > 2009-01-10 </ dd >

< dt >< a href ="http://www.ddcat.net/4" title ="日志标题：CSSzengarden的代码里还有什么" > CSSzengarden的代码里还有什么 </ a ></ dt >

< dd class ="name" >< a href ="#11" title ="作者：greengnn" > greengnn </ a ></ dd >

< dd > 2009-01-10 </ dd >

< dt >< a href ="http://www.ddcat.net/5" title ="日志标题：某些人眼中的色彩" > 某些人眼中的色彩 </ a ></ dt >

< dd class ="name" >< a href ="#11" title ="作者：amethyst01" > amethyst01 </ a ></ dd >

< dd > 2009-01-10 </ dd >

</ dl >

</ div >

</ li >

< li class ="tabOption" >< h4 >< a href ="http://www.ddcat.net/album/" title ="单击，跳转到所有[相册]列表" >< span > 相册 </ span ></ a ></ h4 >

< div class ="tabContentBox" >

< ul class ="tabContent album" >

< li >< a href ="http://www.ddcat.net/img1" title ="查看相册内容" >< img src ="tab_files/cover.jpg" alt ="封面" title ="相册的标题" width ="80" height ="100" ></ a ></ li >

< li >< a href ="http://www.ddcat.net/img1" title ="查看相册内容" >< img src ="tab_files/cover.jpg" alt ="封面" title ="相册的标题" width ="80" height ="100" ></ a ></ li > </ ul >

</ div >

</ li >

< li class ="tabOption" >< h4 >< a href ="http://www.ddcat.net/share/" title ="单击，跳转到所有[分享]列表" >< span > 分享 </ span ></ a ></ h4 >

< div class ="tabContentBox" >

< ul class ="tabContent share" >

< li >< a href ="http://www.ddcat.net/img2" title ="查看内容" >< img src ="tab_files/photo.jpg" alt ="封面" title ="相册的标题" width ="80" height ="100" ></ a ></ li >