兼容opera，chorme，ie，但是在firefox下面有些许缺憾。
见图：
代码如下：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title>FZPT系统的tab样式以及使用方法剖析</title>
<style type="text/css">
#tab
{
margin-bottom:4px;
font-weight: normal;
font-size: 12px;
line-height: normal;
font-style: normal;
font-variant: normal;
}
#tab td
{
white-space: nowrap;
padding:6px;
padding-left:5px;
padding-right:5px;
}
.tabLeft,.tabFocus,.tabNormal,.tabRight
{
border: 1px solid #C2C2C2;
text-align:center;
}
.tabLeft
{
border-width:0px 0px 1px 0px;
width:4px;
}
.tabFocus
{
border-width:3px 0px 0px 1px;
border-top:3px solid #FF9C00;
cursor:hand;
font:bold;
white-space: nowrap;
background:#FFEA97;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#FFEA97, endcolorstr=#ffffff);
}
.tabNormal
{
border-width:1px 0px 1px 1px ;
cursor:hand;
white-space: nowrap;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#EBEBDC, endcolorstr=#ffffff);
color:#000000
}
.tabRight
{
border-width:0px 0px 1px 1px ;
}
</style>
<script type="text/javascript">
var selTabId = null; //选中的tab的id设置为空
var selTabParam = "0";
var tabID ;
var tableIDs;
function initview() {
tabID = new Array("tabxxb", "tabssb", "tabcpb", "tabcwb", "tabfdcb", "tabdcb");
tableIDs = new Array("xs_table", "xs_table", "xs_table", "xs_table", "xs_table", "xs_table");
}
function showSelectedTab(idno) {
selTabParam = idno;
selTabId = tabID[idno];
if (document.all(tabID[idno]).className == "tabNormal") {
for (var i = 0; i < tabID.length; i++) {
document.all(tabID[i]).className = "tabNormal";
document.all(tableIDs[i]).style.display = "none";
}
document.all(tabID[idno]).className = "tabFocus";
document.all(tableIDs[idno]).style.display = "block";
}
}
function showSelectedTabCustomer1(bj) {
if ("0" == bj) {
document.getElementById("iframeMain").scr = "http://www.baidu.com";
}
if ("1" == bj) {
document.getElementById("iframeMain").src = "http://www.google.com.hk"; ;
}
if ("2" == bj) {
document.getElementById("iframeMain").src = "http://www.bing.com";
}
if ("3" == bj) {
document.getElementById("iframeMain").src="http://www.cnblogs.com";
}
if ("4" == bj) {
document.getElementById("iframeMain").src="http://www.csdn.net";
}
if ("5" == bj) {
document.getElementById("iframeMain").src="http://www.51cto.com";
}
showSelectedTab(bj);
}
</script>
</head>
<body onload="initview();">
<form id="form1" runat="server">
<br />
<br />
<table id="tab" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<td class="tabLeft" width="21px">
</td>
<td class="tabFocus" id="tabxxb" onclick="showSelectedTabCustomer1('0'); " width="60px">
百度网站
</td>
<td class="tabNormal" id="tabssb" onclick="showSelectedTabCustomer1('1'); " width="60px">
谷歌网站
</td>
<td class="tabNormal" id="tabcpb" onclick="showSelectedTabCustomer1('2'); " width="60px">
微软搜索
</td>
<td class="tabNormal" id="tabcwb" onclick="showSelectedTabCustomer1('3'); " width="60px">
博客园
</td>
<td class="tabNormal" id="tabfdcb" onclick="showSelectedTabCustomer1('4'); " width="60px">
csdn
</td>
<td class="tabNormal" id="tabdcb" onclick="showSelectedTabCustomer1('5')" width="65px">
51cto网站
</td>
<td class="tabRight">
</td>
</tr>
</table>
<div id="xs_table" style=" 100%;">
<table border="0" cellspacing="0" cellpadding="0" style=" 100%">
<tr>
<td align="left" colspan="4" style="padding-left: 5px;">
<iframe id="iframeMain" name="mainManger" runat="server" width="100%" style="height: 450px;" src=""
frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</td>
</tr>
</table>
</div>
</form>
</body>
</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 runat="server">
<title>FZPT系统的tab样式以及使用方法剖析</title>
<style type="text/css">
#tab
{
margin-bottom:4px;
font-weight: normal;
font-size: 12px;
line-height: normal;
font-style: normal;
font-variant: normal;
}
#tab td
{
white-space: nowrap;
padding:6px;
padding-left:5px;
padding-right:5px;
}
.tabLeft,.tabFocus,.tabNormal,.tabRight
{
border: 1px solid #C2C2C2;
text-align:center;
}
.tabLeft
{
border-width:0px 0px 1px 0px;
width:4px;
}
.tabFocus
{
border-width:3px 0px 0px 1px;
border-top:3px solid #FF9C00;
cursor:hand;
font:bold;
white-space: nowrap;
background:#FFEA97;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#FFEA97, endcolorstr=#ffffff);
}
.tabNormal
{
border-width:1px 0px 1px 1px ;
cursor:hand;
white-space: nowrap;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#EBEBDC, endcolorstr=#ffffff);
color:#000000
}
.tabRight
{
border-width:0px 0px 1px 1px ;
}
</style>
<script type="text/javascript">
var selTabId = null; //选中的tab的id设置为空
var selTabParam = "0";
var tabID ;
var tableIDs;
function initview() {
tabID = new Array("tabxxb", "tabssb", "tabcpb", "tabcwb", "tabfdcb", "tabdcb");
tableIDs = new Array("xs_table", "xs_table", "xs_table", "xs_table", "xs_table", "xs_table");
}
function showSelectedTab(idno) {
selTabParam = idno;
selTabId = tabID[idno];
if (document.all(tabID[idno]).className == "tabNormal") {
for (var i = 0; i < tabID.length; i++) {
document.all(tabID[i]).className = "tabNormal";
document.all(tableIDs[i]).style.display = "none";
}
document.all(tabID[idno]).className = "tabFocus";
document.all(tableIDs[idno]).style.display = "block";
}
}
function showSelectedTabCustomer1(bj) {
if ("0" == bj) {
document.getElementById("iframeMain").scr = "http://www.baidu.com";
}
if ("1" == bj) {
document.getElementById("iframeMain").src = "http://www.google.com.hk"; ;
}
if ("2" == bj) {
document.getElementById("iframeMain").src = "http://www.bing.com";
}
if ("3" == bj) {
document.getElementById("iframeMain").src="http://www.cnblogs.com";
}
if ("4" == bj) {
document.getElementById("iframeMain").src="http://www.csdn.net";
}
if ("5" == bj) {
document.getElementById("iframeMain").src="http://www.51cto.com";
}
showSelectedTab(bj);
}
</script>
</head>
<body onload="initview();">
<form id="form1" runat="server">
<br />
<br />
<table id="tab" cellspacing="0" cellpadding="0" width="100%" align="center" border="0">
<tr>
<td class="tabLeft" width="21px">
</td>
<td class="tabFocus" id="tabxxb" onclick="showSelectedTabCustomer1('0'); " width="60px">
百度网站
</td>
<td class="tabNormal" id="tabssb" onclick="showSelectedTabCustomer1('1'); " width="60px">
谷歌网站
</td>
<td class="tabNormal" id="tabcpb" onclick="showSelectedTabCustomer1('2'); " width="60px">
微软搜索
</td>
<td class="tabNormal" id="tabcwb" onclick="showSelectedTabCustomer1('3'); " width="60px">
博客园
</td>
<td class="tabNormal" id="tabfdcb" onclick="showSelectedTabCustomer1('4'); " width="60px">
csdn
</td>
<td class="tabNormal" id="tabdcb" onclick="showSelectedTabCustomer1('5')" width="65px">
51cto网站
</td>
<td class="tabRight">
</td>
</tr>
</table>
<div id="xs_table" style=" 100%;">
<table border="0" cellspacing="0" cellpadding="0" style=" 100%">
<tr>
<td align="left" colspan="4" style="padding-left: 5px;">
<iframe id="iframeMain" name="mainManger" runat="server" width="100%" style="height: 450px;" src=""
frameborder="0" marginheight="0" marginwidth="0" scrolling="auto"></iframe>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>