欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

分享一个不错的选项卡tabpane支持firefox

程序员文章站 2022-04-27 08:03:08
...

TAB效果图:
分享一个不错的选项卡tabpane支持firefox
 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%;
}