div+css学习笔记04之tab菜单（TOM网）
<!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>
<link href="tom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script >
var tabBGImagePath = "" ;
var tabBGImageType = "_bg.gif" ;
var debug = false ;
function switchTab (tab)
{
var tabName = getTabGroupName (tab.id) ;
if (tabName == '')
{
alert ("No tabName for tab [" + tab.id + "]") ;
return ;
}
var index = 1 ;
while (true)
{
var tabTitle = document.getElementById (tabName + '_' + index) ;
if (tabTitle == undefined)
break ;
deonTabTitle (tabTitle , tabName) ;
var tabContent = document.getElementById (tabName + '_' + index + '_content') ;
if (tabContent != undefined)
tabContent.style.display = "none" ;
index ++ ;
}
if (debug)
alert ("Find " + (index - 1) + " tab title(s) for TabName [" + tabName + "]") ;
onTabTitle (tab , tabName) ;
var tabContent = document.getElementById (tab.id + '_content') ;
if (tabContent != undefined)
tabContent.style.display = "BLOCK" ;
var tabHeader = document.getElementById (tabName + "_header") ;
if (tabHeader != undefined)
{
tabHeader.className = "tabheader_" + tab.id ;
}
}
function getTabGroupName (tabId)
{
if (tabId == '' || tabId == undefined)
{
alert ("tabId is NULL! [" + tabId + "]") ;
return ;
}
var i = tabId.lastIndexOf ('_') ;
if (i <= 1)
return '' ;
return tabId.substr (0 , i) ;
}
function deonTabTitle (tab , tabName)
{
tab.className = tabName + "_off" ;
}
function onTabTitle (tab , tabName)
{
tab.className = tabName + "_on" ;
}
</script>
<div id="tb7_header" class="tabheader_tb7_1"><div class=tb7_on id=tb7_1><a href="#" target=_blank onMouseOver="switchTab (document.getElementById('tb7_1'));"><font color="#000000">人物专题</font></a></div><div class=tb7_off id=tb7_2><a href="#" target=_blank onMouseOver="switchTab (document.getElementById('tb7_2'));">人物专访录</a></div></div>
<div id="tb7_1_content">
<div>
<div class=tb_pic01>
<a href="#" target="_blank"><img src="361.jpg" alt="小娴热舞走光" border="0"></a>
<div class=tb_con><div class=con05>
<a href="#" target=_blank class=rft>小娴热舞走光</a>
</div>
</div>
<div>
<ul class=z02>
<li><a href="#" target=_blank>黄征秘密</a></li>
<li><a href="#" target=_blank>黄征秘密</a></li>
<li><a href="#" target=_blank>黄征秘密</a></li>
<li><a href="#" target=_blank>黄征秘密</a></li>
</ul>
</div>
</div>
</div>
<div class=tb_txt01>
<ul>
<li style="list-style-type:none;"><a href="#" target="_blank" class=bft>肥姐昏迷入院</a></li>
<li class=z01><a href="#" target="_blank">结婚自称王太</a></li>
<li class=z01><a href="#" target="_blank">陈慧娴否认焦</a></li>
<li class=z01><a href="#" target="_blank">披头士成员保</a></li>
<li><a href="#" target="_blank" class=bft>肥姐昏迷入院</a></li>
<li class=z01><a href="#" target="_blank">结婚自称王太</a></li>
<li class=z01><a href="#" target="_blank">陈慧娴否认焦</a></li>
<li class=z01><a href="#" target="_blank">披头士成员保</a></li>
<li><a href="#" target="_blank" class=bft>肥姐昏迷入院</a></li>
<li class=z01><a href="#" target="_blank">结婚自称王太</a></li>
<li class=z01><a href="#" target="_blank">陈慧娴否认焦</a></li>
<li class=z01><a href="#" target="_blank">披头士成员保</a></li>
<li><a href="#" target="_blank" class=bft>肥姐昏迷入院</a></li>
</ul>
</div>
<div class=clear>
</div>
</div>
<div id="tb7_2_content" class=non>
<div class=tb_pic01><a href="#" target="_blank"><img src="615.jpg" alt="" border="0"></a>
<div class=tb_con><div class=con05>
<a href="#" target=_blank class=rft>李安结婚照曝光</a>
</div>
</div>
</div>
<div class=tb_txt01>
<ul>
<li><a href="#" target="_blank" class=bft>性骚扰单位赔偿</a></li>
<li class=z01><a href="#">关键词手机电影</a></li>
<li class=z01><a href="#" target="_blank" class=adb>莓100%日历壁纸</a></li>
<li class=z01><a href="#"target="_blank" class=adb>韩流行乐淹没笑</a></li>
</ul>
</div>
<div class=clear></div>
<div class=tb_link01>
<ul class=z02>
<li><a href="#" target=_blank><h4>黄征秘密完婚婚礼照片曝光</h4></a></li>
<li><a href="#" target=_blank>黄征秘密完婚婚礼照片曝光</a></li>
<li><a href="#" target=_blank>黄征秘密完婚婚礼照片曝光</a></li>
<li><a href="#" target=_blank>黄征秘密完婚婚礼照片曝光</a></li>
<li><a href="#" target=_blank>黄征秘密完婚婚礼照片曝光</a></li>
<li><a href="#" target=_blank>黄征秘密完婚婚礼照片曝光</a></li>
</ul>
</div>
</div>
</body>
</html>
.z01 {
COLOR: black; LINE-HEIGHT: 18px
}
.z01 A:link {
COLOR: black; TEXT-DECORATION: none
}
.z01 A:visited {
COLOR: #990000; TEXT-DECORATION: none
}
.z01 A:hover {
COLOR: #0033cc; TEXT-DECORATION: underline
}
.z02 {
COLOR: black; LINE-HEIGHT: 20px
}
.z02 A:link {
COLOR: black; TEXT-DECORATION: none
}
.z02 A:visited {
COLOR: #990000; TEXT-DECORATION: none
}
.z02 A:hover {
COLOR: #0033cc; TEXT-DECORATION: underline
}
.tb_link01 {
MARGIN: 7px 0px 0px 8px
}
.tabheader_tb7_1 {
BACKGROUND-IMAGE: url(Images/tz-f_63.gif)
}
.tabheader_tb7_2 {
BACKGROUND-IMAGE: url(Images/tz-f_63-2.gif)
}
.tb7_on {
COLOR: black
}
.tb7_on A:link {
COLOR: black; TEXT-DECORATION: none
}
.tb7_on A:visited {
COLOR: black; TEXT-DECORATION: none
}
.tb7_on A:hover {
COLOR: #0033cc; TEXT-DECORATION: underline
}
.tb7_off {
COLOR: #004b01
}
.tb7_off A:link {
COLOR: #004b01; TEXT-DECORATION: none
}
.tb7_off A:visited {
COLOR: #004b01; TEXT-DECORATION: none
}
.tb7_off A:hover {
COLOR: #0033cc; TEXT-DECORATION: underline
}
#tb7_header {
WIDTH: 240px; HEIGHT: 25px; TEXT-ALIGN: center
}
#tb7_1 {
FLOAT: left; WIDTH: 80px; PADDING-TOP: 2px; padding-left:12px;
}
#tb7_2 {
FLOAT: left; WIDTH: 82px; PADDING-TOP: 2px; padding-left:40px;
}
#tb7_1_content {
BORDER-RIGHT: #CADAEC 1px solid; BORDER-TOP: #CADAEC 0px solid; BORDER-LEFT: #CADAEC 1px solid; WIDTH: 240px; BORDER-BOTTOM: #CADAEC 1px solid; HEIGHT: 141px
}
#tb7_2_content {
BORDER-RIGHT: #b1d990 1px solid; BORDER-TOP: #b1d990 0px solid; BORDER-LEFT: #b1d990 1px solid; WIDTH: 240px; BORDER-BOTTOM: #b1d990 1px solid; HEIGHT: 141px; BACKGROUND-COLOR: #f3ffeb
}
.non {
DISPLAY: none
}
.tb_pic01 {
FLOAT: left; WIDTH: 108px; PADDING-TOP: 10px; TEXT-ALIGN: center
}
.tb_txt01 {
FLOAT: left; PADDING-TOP: 7px
}
.tb_txt02 {
FLOAT: left; MARGIN: 8px 0px 0px -7px
}
.tb_link01 {
MARGIN: 7px 0px 0px 8px
}
.tb_link02 {
MARGIN: 7px 0px 0px 8px
}
.tb_link03 {
PADDING-RIGHT: 0px; PADDING-LEFT: 6px; PADDING-BOTTOM: 0px; PADDING-TOP: 7px
}
.tb_link04 {
BORDER-RIGHT: white 3px solid; PADDING-RIGHT: 0px; BORDER-TOP: white 3px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; BORDER-LEFT: white 3px solid; WIDTH: 303px; PADDING-TOP: 13px; BORDER-BOTTOM: white 3px solid; HEIGHT: 84px; BACKGROUND-COLOR: #f9fbf8
}
浙公网安备 33010602011771号