来源:百度文库 编辑:中财网 时间:2024/04/30 03:10:19
分享一个不错的选项卡tabpane支持firefox
FirefoxCSSJavaScriptXHTMLHTML
TAB效果图:
Tab_m.html
Html代码
- >
- xmlns="http://www.w3.org/1999/xhtml">
-
- http-equiv="Content-Type" content="text/html; charset=utf-8" />
- src="tabpane.js" type="text/javascript">
- href="tab.css" rel="stylesheet" type="text/css" />
- Tab
- 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;
- }
-
-
-
width="100%" border="0" cellspacing="6" cellpadding="0" style="border-collapse: separate; border-spacing: 6px;"> -
valign="top"> -
width="100%" border="0" cellspacing="0" cellpadding="6" class="blockTable"> -
-
valign="middle" class="blockTd"> -
class= "tab-pane" id= "tabPaneB"> -
class="tab-page" style="height: 200px" id="tabPage1"> - class="tab" value="1">日报表
-
-
class="tab-page" style="height: 200px" id="tabPage2"> - class="tab" value="2">月报表
-
-
class="tab-page" style="height: 200px" id="tabPage3"> - class="tab" value="3">年报表
-
-
class="tab-page" style="height: 200px" id="tabPage4"> - class="tab" value="4">通用报表
-
-
-
| -
-
| -
-
-
Tab
tab.css
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%;
- }