分享一个不错的选项卡tabpane支持firefox
程序员文章站
2022-04-27 08:03:08
...
TAB效果图：
Tab_m.html
<!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=utf-8" />
<script src="tabpane.js" type="text/javascript"></script>
<link href="tab.css" rel="stylesheet" type="text/css" />
<title>Tab</title>
<style type="text/css">
.blockTable {
border: #BBBBBB 0px solid;
background: url(images/tableBg_left.gif) no-repeat left top;
}
.blockTd {
background: url(images/tableBg_right.gif) no-repeat right top;
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="6" cellpadding="0" style="border-collapse: separate; border-spacing: 6px;">
<tr valign="top">
<td><table width="100%" border="0" cellspacing="0" cellpadding="6" class="blockTable">
<tr>
<td valign="middle" class="blockTd">
<div class="tab-pane" id="tabPaneB">
<div class="tab-page" style="height: 200px" id="tabPage1">
<h2 class="tab" value="1">日报表</h2>
</div>
<div class="tab-page" style="height: 200px" id="tabPage2">
<h2 class="tab" value="2">月报表</h2>
</div>
<div class="tab-page" style="height: 200px" id="tabPage3">
<h2 class="tab" value="3">年报表</h2>
</div>
<div class="tab-page" style="height: 200px" id="tabPage4">
<h2 class="tab" value="4">通用报表</h2>
</div>
</div>
</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
tab.css
/*
bright: #F9FCFF;
normal: rgb(120,172,255);
dark: rgb(0,66,174);
*/
li{height: 18px; line-height: 18px;font-size: 14px;}
.dynamic-tab-pane-control.tab-pane {
position: relative;
width: 100%;
}
.dynamic-tab-pane-control .tab-row .tab {
border: 1px solid #BEC9CF;
border-top: 0px;
border-bottom: 0px;
font-size: 12px;
cursor: Default;
display: inline;
margin: 1px 0px 1px 5px;
float: left;
padding: 3px 6px 3px 6px;
cursor: hand;
cursor: pointer;
z-index: 1;
position: relative;
top: -2px;
background: url(images/s_tabout_bg_left.gif) -2px 0px ;
height:25px;
line-height:25px;
}
.dynamic-tab-pane-control .tab-row .tab.selected {
border: 1px solid #BEC9CF;
border-top: 0px;
border-bottom: 0px;
z-index: 3;
padding: 3px 6px 3px 6px;
margin: 1px 0px 1px 5px;
top: -4px;
background: url(images/s_tabover_bg_left.gif) -2px 0px ;
height:27px;
line-height:27px;
}
.dynamic-tab-pane-control .tab-row .tab a {
font-family: Verdana, Helvetica, Arial;
font-size: 13px;
color: rgb(0,66,174);
text-decoration: none;
cursor: hand;
cursor: pointer;
}
.dynamic-tab-pane-control .tab-row .hover a {
color: rgb(0,66,174);
}
.dynamic-tab-pane-control .tab-row .tab.selected a {
font-weight: bold;
}
.dynamic-tab-pane-control .tab-page {
clear: both;
z-index: 2;
position: relative;
top: -5px;
color: Black;
font-size: 13px;
padding: 10px;
border-top: 1px solid #BEC9CF;
}
.dynamic-tab-pane-control .tab-row {
z-index: 1;
white-space: nowrap;
height: 32px;
width: 100%;
}
上一篇： 定时任务最简单的3种实现方法（超好用）