[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;  /* 清除浏览器中列表项默认的占位 */
}

{
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><href="http://www.ddcat.net/blog/" title="单击,跳转到所有[日志]列表"><span>日志</span></a></h4>
      
<div class="tabContentBox">
      
<dl class="tabContent blog">
        
<dt><href="http://www.ddcat.net/1" title="日志标题:优秀广告设计,不服不行!">优秀广告设计,不服不行!</a></dt>
        
<dd class="name"><href="#11" title="作者:QUESTER">QUESTER</a></dd>
        
<dd>2009-01-10</dd>
        
<dt><href="http://www.ddcat.net/2" title="日志标题:Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>
        
<dd class="name"><href="#11" title="作者:snl">snl</a></dd>
        
<dd>2009-01-10</dd>
        
<dt><href="http://www.ddcat.net/3" title="日志标题:网站内容结构化探讨">网站内容结构化探讨</a></dt>
        
<dd class="name"><href="#11" title="作者:豆猫">豆猫</a></dd>
        
<dd>2009-01-10</dd>
        
<dt><href="http://www.ddcat.net/4" title="日志标题:CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt>
        
<dd class="name"><href="#11" title="作者:greengnn">greengnn</a></dd>
        
<dd>2009-01-10</dd>
        
<dt><href="http://www.ddcat.net/5" title="日志标题:某些人眼中的色彩">某些人眼中的色彩</a></dt>
        
<dd class="name"><href="#11" title="作者:amethyst01">amethyst01</a></dd>
        
<dd>2009-01-10</dd>
      
</dl>
      
</div> 
    
</li>
    
<li class="tabOption"><h4><href="http://www.ddcat.net/album/" title="单击,跳转到所有[相册]列表"><span>相册</span></a></h4>
      
<div class="tabContentBox">
      
<ul class="tabContent album">
        
<li><href="http://www.ddcat.net/img1" title="查看相册内容"><img src="tab_files/cover.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
        
<li><href="http://www.ddcat.net/img1" title="查看相册内容"><img src="tab_files/cover.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
        
<li><href="http://www.ddcat.net/img1" title="查看相册内容"><img src="tab_files/cover.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
        
<li><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><href="http://www.ddcat.net/share/" title="单击,跳转到所有[分享]列表"><span>分享</span></a></h4>
      
<div class="tabContentBox">
      
<ul class="tabContent share">
        
<li><href="http://www.ddcat.net/img2" title="查看内容"><img src="tab_files/photo.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
        
<li><href="http://www.ddcat.net/img2" title="查看内容"><img src="tab_files/photo.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
        
<li><href="http://www.ddcat.net/img2" title="查看内容"><img src="tab_files/photo.jpg" alt="封面" title="相册的标题" width="80" height="100"></a></li>
        
<li><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><href="http://www.ddcat.net/group/" title="单击,跳转到所有[群组]列表"><span>群组</span></a></h4>
      
<div class="tabContentBox">
      
<dl class="tabContent group">
        
<dt><href="http://www.ddcat.net/1" title="标题:优秀广告设计,不服不行!">优秀广告设计,不服不行!</a></dt>
        
<dd class="name"><href="#11" title="群组:设计视觉">设计视觉</a></dd>
        
<dd>2009-01-10</dd>
        
<dt><href="http://www.ddcat.net/2" title="标题:Photoshop 的真人动漫效果">Photoshop 的真人动漫效果</a></dt>
        
<dd class="name"><href="#11" title="群组:手绘爱好者">手绘爱好者</a></dd>
        
<dd>2009-01-10</dd>
        
<dt><href="http://www.ddcat.net/3" title="标题:网站内容结构化探讨">网站内容结构化探讨</a></dt>
        
<dd class="name"><href="#11" title="群组:WEB标准化">WEB标准化</a></dd>
        
<dd>2009-01-10</dd>
        
<dt><href="http://www.ddcat.net/4" title="标题:CSSzengarden的代码里还有什么">CSSzengarden的代码里还有什么</a></dt>
        
<dd class="name"><href="#11" title="群组:WEB标准化">WEB标准化</a></dd>
        
<dd>2009-01-10</dd>
        
<dt><href="http://www.ddcat.net/5" title="标题:某些人眼中的色彩">某些人眼中的色彩</a></dt>
        
<dd class="name"><href="#11" title="群组:设计视觉">设计视觉</a></dd>
        
<dd>2009-01-10</dd>
      
</dl>
      
</div>
    
</li>
  
</ul>
</div>
</body></html>



选项卡

posted on 2009-03-12 22:15  cutepig  阅读(677)  评论(1编辑  收藏  举报

导航