破解天下论坛 » 前台设计 » table滑动门/选项卡代码

wumingxiaozu 发表于 2010-1-11 23:22

table滑动门/选项卡代码

[html]<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
font-size: 12px;
}
.STYLE1 {
font-size: 18px;
font-weight: bold;
}
.menu_title{background:#ccc;}
.menu_title_on{background:#eee;}
-->
</style>
<SCRIPT language=JavaScript>   
var tID=0;
function ShowTabs(ID){
if(ID!=tID){
  TabTitle[tID].className="menu_title";
  TabTitle[ID].className="menu_title_on";
  Tabs[tID].style.display="none";
  Tabs[ID].style.display="";
  tID=ID;
}
}
</SCRIPT>
<title>网页新闻</title><table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" valign="middle"  style="cursor:hand" class="menu_title_on" id="TabTitle" onclick="ShowTabs(0)">新闻一</td>
<td height="30" align="center" valign="middle"  style="cursor:hand"  class="menu_title" id="TabTitle" onclick="ShowTabs(1)">新闻二</td>
<td height="30" align="center" valign="middle"  style="cursor:hand"  class="menu_title" id="TabTitle" onclick="ShowTabs(2)">新闻二</td>
</tr>
</table>
<table width="500" height="200" border="0" cellpadding="0" cellspacing="0" id="Tabs" style="display:">
<tr>
<td bgcolor="#33FFFF" align="center" valign="middle"><span class="STYLE1">新闻一</span></td>
</tr>
</table>
<table width="500" height="200" border="0" cellpadding="0" cellspacing="0" id="Tabs" style="display: none;">
<tr>
<td align="center" valign="middle" bgcolor="#6600FF" class="STYLE1 ">新闻二</td>
</tr>
</table>
<table width="500" height="200" border="0" cellpadding="0" cellspacing="0" id="Tabs" style="display: none;">
<tr>
<td align="center" valign="middle" bgcolor="#ff00FF" class="STYLE1 ">新闻三</td>
</tr>
</table>

[/html]

wumingxiaozu 发表于 2010-1-11 23:23

[html]<style type="text/css">
<!--
body,td,th {
color: #FFFFFF;
font-size: 12px;
}
.STYLE1 {
font-size: 18px;
font-weight: bold;
}
.menu_title{background:#ccc;}
.menu_title_on{background:#eee;}
-->
</style>
<SCRIPT language=JavaScript>   
var tID=0;
function ShowTabs(ID){
if(ID!=tID){
  TabTitle[tID].className="menu_title";
  TabTitle[ID].className="menu_title_on";
  Tabs[tID].style.display="none";
  Tabs[ID].style.display="";
  tID=ID;
}
}
</SCRIPT>
<title>网页新闻</title><table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="30" align="center" valign="middle"  style="cursor:hand" class="menu_title_on" id="TabTitle" onmouseover="ShowTabs(0)">新闻一</td>
<td height="30" align="center" valign="middle"  style="cursor:hand"  class="menu_title" id="TabTitle" onmouseover="ShowTabs(1)">新闻二</td>
<td height="30" align="center" valign="middle"  style="cursor:hand"  class="menu_title" id="TabTitle" onmouseover="ShowTabs(2)">新闻二</td>
</tr>
</table>
<table width="500" height="200" border="0" cellpadding="0" cellspacing="0" id="Tabs" style="display:">
<tr>
<td bgcolor="#33FFFF" align="center" valign="middle"><span class="STYLE1">新闻一</span></td>
</tr>
</table>
<table width="500" height="200" border="0" cellpadding="0" cellspacing="0" id="Tabs" style="display: none;">
<tr>
<td align="center" valign="middle" bgcolor="#6600FF" class="STYLE1 ">新闻二</td>
</tr>
</table>
<table width="500" height="200" border="0" cellpadding="0" cellspacing="0" id="Tabs" style="display: none;">
<tr>
<td align="center" valign="middle" bgcolor="#ff00FF" class="STYLE1 ">新闻三</td>
</tr>
</table>

[/html]

查看完整版本: table滑动门/选项卡代码