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

最新推荐文章于 2021-06-07 16:54:16 发布

原创最新推荐文章于 2021-06-07 16:54:16 发布 · 181 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Firefox #CSS #JavaScript #XHTML #HTML #ViewUI

WEB前台专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的Tab界面效果。该界面包含四个不同的报表选项卡，每个选项卡都有相应的样式设置，并通过外部链接的JS文件进行交互控制。此示例还展示了如何使用内联样式和自定义CSS类来美化选项卡。

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%;
}