<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Tab</title>
<style type="text/css">
<!--
body {
background-color: #999999;
}
.selectedTab {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: #cacaca 0px solid;
BACKGROUND-COLOR: #cacaca;
height:32px;
width:120px;
cursor:default;
}
.unselectedTab {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: black 1px solid;
height:32px;
width:120px;
cursor:pointer;
}
.tabPage {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: none 0px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: black 1px solid;
BACKGROUND-COLOR: #cacaca
}
.spacingTab {
BORDER-BOTTOM: black 1px solid;
width:10px;
}
.overplusTab {
BORDER-BOTTOM: black 1px solid;
width: auto;
}
-->
</style>
<SCRIPT language="JavaScript">
<!--
var prevTabName;
var prevTabPage;
var prevTabButton;
var hdnSelectedTab;
function Init() {
var tabButtonA = document.all('tabButtonA');
var tabButtonB = document.all('tabButtonB');
var tabPageA = document.all('tabPageA');
var tabPageB = document.all('tabPageB');
tabPageA.style.display = 'none';
tabPageB.style.display = 'none';
tabButtonA.className= 'unselectedTab';
tabButtonB.className= 'unselectedTab';
hdnSelectedTab = document.all("hdnSelectedTab");
prevTabName = hdnSelectedTab.value;
prevTabButton = document.all('tabButton' + prevTabName);
prevTabPage = document.all('tabPage' + prevTabName);
prevTabButton.className = 'selectedTab';
prevTabPage.style.display = 'block';
}
function switchToTab(tabName)
{
if (tabName != prevTabName)
{
prevTabPage.style.display = 'none';
prevTabButton.className = 'unselectedTab';
prevTabName = tabName;
prevTabPage = document.all('tabPage' + tabName);
prevTabButton = document.all('tabButton' + tabName);
prevTabPage.style.display = 'block';
prevTabButton.className = 'selectedTab';
hdnSelectedTab.value = tabName;
}
prevTabButton.blur();
}
//-->
</SCRIPT>
</head>
<body onLoad="Init();">
<input type="hidden" name="hdnSelectedTab" value="A">
<table width="480" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" id="tabTitle" width="100%">
<tr>
<td id="tabButtonA" align="center" onClick="JavaScript:switchToTab('A')">tab A</td>
<td id="tabSpacing" class="spacingTab"> </td>
<td id="tabButtonB" align="center" onClick="JavaScript:switchToTab('B')">tab B</td>
<td id="taboverplus" class="overplusTab"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" class="tabPage" id="tabPageA">
<tr>
<td align="center">tableA</td>
</tr>
</table>
<table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" class="tabPage" id="tabPageB">
<tr>
<td align="center">tableB</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>Tab</title>
<style type="text/css">
<!--
body {
background-color: #999999;
}
.selectedTab {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: #cacaca 0px solid;
BACKGROUND-COLOR: #cacaca;
height:32px;
width:120px;
cursor:default;
}
.unselectedTab {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: black 1px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: black 1px solid;
height:32px;
width:120px;
cursor:pointer;
}
.tabPage {
BORDER-RIGHT: black 1px solid;
BORDER-TOP: none 0px solid;
BORDER-LEFT: black 1px solid;
BORDER-BOTTOM: black 1px solid;
BACKGROUND-COLOR: #cacaca
}
.spacingTab {
BORDER-BOTTOM: black 1px solid;
width:10px;
}
.overplusTab {
BORDER-BOTTOM: black 1px solid;
width: auto;
}
-->
</style>
<SCRIPT language="JavaScript">
<!--
var prevTabName;
var prevTabPage;
var prevTabButton;
var hdnSelectedTab;
function Init() {
var tabButtonA = document.all('tabButtonA');
var tabButtonB = document.all('tabButtonB');
var tabPageA = document.all('tabPageA');
var tabPageB = document.all('tabPageB');
tabPageA.style.display = 'none';
tabPageB.style.display = 'none';
tabButtonA.className= 'unselectedTab';
tabButtonB.className= 'unselectedTab';
hdnSelectedTab = document.all("hdnSelectedTab");
prevTabName = hdnSelectedTab.value;
prevTabButton = document.all('tabButton' + prevTabName);
prevTabPage = document.all('tabPage' + prevTabName);
prevTabButton.className = 'selectedTab';
prevTabPage.style.display = 'block';
}
function switchToTab(tabName)
{
if (tabName != prevTabName)
{
prevTabPage.style.display = 'none';
prevTabButton.className = 'unselectedTab';
prevTabName = tabName;
prevTabPage = document.all('tabPage' + tabName);
prevTabButton = document.all('tabButton' + tabName);
prevTabPage.style.display = 'block';
prevTabButton.className = 'selectedTab';
hdnSelectedTab.value = tabName;
}
prevTabButton.blur();
}
//-->
</SCRIPT>
</head>
<body onLoad="Init();">
<input type="hidden" name="hdnSelectedTab" value="A">
<table width="480" height="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" id="tabTitle" width="100%">
<tr>
<td id="tabButtonA" align="center" onClick="JavaScript:switchToTab('A')">tab A</td>
<td id="tabSpacing" class="spacingTab"> </td>
<td id="tabButtonB" align="center" onClick="JavaScript:switchToTab('B')">tab B</td>
<td id="taboverplus" class="overplusTab"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" class="tabPage" id="tabPageA">
<tr>
<td align="center">tableA</td>
</tr>
</table>
<table width="100%" height="400" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC" class="tabPage" id="tabPageB">
<tr>
<td align="center">tableB</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
注:<input type="hidden" name="hdnSelectedTab" value="A">其实并不能真正解决页面Postback的问题,因为它跟<input type="text" 一样,value值在Postback后将丢失,不会被记忆,这也是WebApplication的老问题,不能记忆页面的状态。 要想真正解决此问题可以: 总之: Web Page不会自己无条件的记忆原来的状态,同一个页面,在Postback前和后,虽然还是同一个页面,但Postback前的状态将会完全丢失。 |