[CSS+JS]同一页面可以重复使用的选项卡收藏

<! 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 >
         < 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 >
         < li >< a  href ="http://www.ddcat.net/img2"  title ="查看内容" >< img  src ="tab_files/photo.jpg"  alt ="封面"  title ="相册的标题"  width ="80"  height ="100" ></ a ></ li >
         < li >< a  href ="http://www.ddcat.net/img2"  title ="查看内容" >< img  src ="tab_files/photo.jpg"  alt ="封面"  title ="相册的标题"  width ="80"  height ="100" ></ a ></ li >
         < li >< a  href ="http://www.ddcat.net/img2"  title ="查看内容" >< img  src ="tab_files/photo.jpg"  alt ="封面"  title ="相册的标题"  width ="80"  height ="100" ></ a ></ li >
       </ ul >
       </ div >
     </ li >
     < li  class ="tabOption" >< h4 >< a  href ="http://www.ddcat.net/group/"  title ="单击，跳转到所有[群组]列表" >< span > 群组 </ span ></ a ></ h4 >
       < div  class ="tabContentBox" >
       < dl  class ="tabContent group" >
         < dt >< a  href ="http://www.ddcat.net/1"  title ="标题：优秀广告设计，不服不行！" > 优秀广告设计，不服不行！ </ a ></ dt >
         < dd  class ="name" >< a  href ="#11"  title ="群组：设计视觉" > 设计视觉 </ 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 ="群组：手绘爱好者" > 手绘爱好者 </ 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 ="群组：WEB标准化" > WEB标准化 </ 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 ="群组：WEB标准化" > WEB标准化 </ 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 ="群组：设计视觉" > 设计视觉 </ a ></ dd >
         < dd > 2009-01-10 </ dd >
       </ dl >
       </ div >
     </ li >
   </ ul >
</ div >
</ body ></ html >

• 日志

  优秀广告设计，不服不行！

  QUESTER

  2009-01-10

  Photoshop 的真人动漫效果

  snl

  2009-01-10

  网站内容结构化探讨

  豆猫

  2009-01-10

  CSSzengarden的代码里还有什么

  greengnn

  2009-01-10

  某些人眼中的色彩

  amethyst01

  2009-01-10

• 相册

  • 
  • 
  • 
  • 

• 分享

  • 
  • 
  • 
  • 

• 群组

  优秀广告设计，不服不行！

  设计视觉

  2009-01-10

  Photoshop 的真人动漫效果

  手绘爱好者

  2009-01-10

  网站内容结构化探讨

  WEB标准化

  2009-01-10

  CSSzengarden的代码里还有什么

  WEB标准化

  2009-01-10

  某些人眼中的色彩

  设计视觉

  2009-01-10