如何用javascript在页面上实现类似平常窗口中选项卡的功能(tag) 可以用三个button和三个层,点击第一个button显示第一个层,第二和第三个层隐藏点击第二个button显示第一个层,第一和第三个层隐藏点击第三个button显示第一个层,第一和第二个层隐藏 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 我的javascript较差。能给点例子吗?谢谢 vivianfdlpw。 可以用三个button和三个层,点击第一个button显示第一个层,第二和第三个层隐藏点击第二个button显示第一个层,第一和第三个层隐藏点击第三个button显示第一个层,第一和第二个层隐藏----------------------------------------------------这家伙有点笨,如果模拟的选项卡的层多了那你不**死?应该是用三个button三个层点一个button,隐藏上一次显示的层,同时显示现在要显示的层....具体有例子给你看看...http://www.pniu.net/test/emotions/emotions.html这个本来是做在FCKEditor上的一个插件,只是一个例子,使用了OO设计,很简洁的,但也只是在特定环境下运行用的.但是你可以参考一下,另外做也很容易的. <style>td{border-width:2px;border-style:solid;border-color:blue}div{width:100%;background-color:orange}</style><script>function show(num){ var s; for(var i=1;i<=3;i++) { s=document.getElementById(i); if(i==num) { s.style.display=''; } else { s.style.display='none'; } }}</script><body><table><tr><td onclick="show(1)">选项卡1</td><td onclick="show(2)">选项卡2</td><td onclick="show(3)">选项卡3</td></tr></table><div id="1">选项卡1</div><div id="2" style="display:none">选项卡2</div><div id="3" style="display:none">选项卡3</div></body> 仿msn的<!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=gb2312"><title>无标题文档</title><style>BODY { BACKGROUND: #1a60a8}body { background-color: #1a60a8;}BODY { MARGIN: 0px; PADDING-TOP: 4px}body,td,th { font-size: 12px;}.sfii { BORDER-TOP: #3e9dda 1px solid;FONT-SIZE: 1px }.sfii { BACKGROUND: #2b7aba}.tab { BORDER-LEFT: #3e9dda 1px solid;BORDER-RIGHT: #004e82 1px solid;BORDER-TOP: #3e9dda 1px solid;COLOR: #fff;CURSOR: hand}.tab { BACKGROUND: url(/webinclude/images/msn/sfb-mb.gif) #1a60a8 repeat-x}.tab { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px}.tab A { COLOR: #fff}.tab A:visited { COLOR: #fff}.tab A:hover { COLOR: #fff}.tabsel { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}.tabsel { BACKGROUND: #5aa8da;BORDER-LEFT: #a2d8e9 1px solid;BORDER-TOP: #a2d8e9 1px solid;BORDER-RIGHT: #004e82 1px solid;COLOR: #fff;CURSOR: hand}.tabsel A { COLOR: #fff}.tabsel A:visited { COLOR: #fff}.tabsel A:hover { COLOR: #fff}.terms { COLOR: #fff;BORDER-TOP: #5f90c2 1px solid;FONT-SIZE: 11px;FONT-FAMILY: Tahoma}.terms A:hover { COLOR: #fff}.terms A:visited { COLOR: #fff}.sfi { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px}.sfi { BORDER-BOTTOM: #5aa8da 1px solid;BORDER-TOP: #3e9dda 1px solid;FONT-SIZE: 1px }.sfi { BACKGROUND: url(/webinclude/images/msn/sfb-mb.gif) #2b7aba repeat-x}.sfi A { COLOR: #fff}.sfi B { COLOR: #fff}.tb { BACKGROUND: #5aa8da;COLOR: #004e82}</style></head><body><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="86" height="20" valign="bottom" ><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td height="14"> </td> </tr> <tr> <TD class=sfii height=8> </TD> </tr> </table></td> <td width="113"><img src="sft-mb.jpg" width="113" height="44"></td> <td valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="80" height="23" class="tab" id=MUtd onClick="OnClickTd(0)">view1</td> <td width="80" height="23" class="tabsel" id=MUtd onClick="OnClickTd(1)">view1</td> <td class="tab" width="80" id=MUtd onClick="OnClickTd(2)"> </td> <td class="tab" width="80" id=MUtd onClick="OnClickTd(3)"> </td> <td class="sfi"> </td> </tr> </table></td> </tr></table><table width="100%" border="0" cellspacing="0" class="tb" cellpadding="0"> <tr> <td><table width="200" border="0" cellspacing="0" cellpadding="0"> <tr> <td > </td> </tr> <tr> <td bgcolor="#1a60a8" > </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> <tr> <td> </td> </tr> </table></td> <td > </td> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> <td> </td> <td> </td> </tr></table><TABLE id=Table1 height=29 cellSpacing=0 cellPadding=0 width=99% border=0> <TBODY> <TR> <TD class=terms height=29><NOBR> © 2004 Tlp. 保留所有权利。</NOBR> <NOBR></NOBR></TD> </TR> </TBODY></TABLE><p></p><script language="javascript">function OnClickTd(i){ for(x=0;x<MUtd.length;x++) { if(x!=i) MUtd[x].className="tab"; else MUtd[x].className="tabsel"; }}</script></body></html> 怎么去掉水平滚动条呢? ie窗口关闭事件 点击时怎么才能中显示一个层呢??? 关于<a herf>问题 js 求一正则javasript转化为vbsript 如何改变iframe的src? 实现IE的后退功能 请教!!!做一个动态的数组!!! 再请教一个问题:如何清空一个下拉列表的内容? <EMBED src=".....>播放音乐时的问题 这么样才能让 <input type="file" id="f"> 组件后面的 按钮得到焦点???解决问题马上送分..
点击第一个button显示第一个层,第二和第三个层隐藏
点击第二个button显示第一个层,第一和第三个层隐藏
点击第三个button显示第一个层,第一和第二个层隐藏----------------------------------------------------
这家伙有点笨,如果模拟的选项卡的层多了那你不**死?应该是用三个button三个层
点一个button,隐藏上一次显示的层,同时显示现在要显示的层....具体有例子给你看看...
http://www.pniu.net/test/emotions/emotions.html这个本来是做在FCKEditor上的一个插件,只是一个例子,使用了OO设计,很简洁的,但也只是在特定环境下运行用的.但是你可以参考一下,另外做也很容易的.
td{border-width:2px;border-style:solid;border-color:blue}
div{width:100%;background-color:orange}
</style>
<script>
function show(num)
{
var s;
for(var i=1;i<=3;i++)
{
s=document.getElementById(i);
if(i==num)
{
s.style.display='';
}
else
{
s.style.display='none';
}
}
}
</script>
<body>
<table>
<tr><td onclick="show(1)">选项卡1</td><td onclick="show(2)">选项卡2</td><td onclick="show(3)">选项卡3</td></tr>
</table>
<div id="1">选项卡1</div>
<div id="2" style="display:none">选项卡2</div>
<div id="3" style="display:none">选项卡3</div>
</body>
<!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=gb2312">
<title>无标题文档</title>
<style>
BODY {
BACKGROUND: #1a60a8
}
body {
background-color: #1a60a8;
}
BODY {
MARGIN: 0px; PADDING-TOP: 4px
}body,td,th {
font-size: 12px;
}.sfii {
BORDER-TOP: #3e9dda 1px solid;FONT-SIZE: 1px
}
.sfii {
BACKGROUND: #2b7aba
}
.tab {
BORDER-LEFT: #3e9dda 1px solid;BORDER-RIGHT: #004e82 1px solid;BORDER-TOP: #3e9dda 1px solid;COLOR: #fff;CURSOR: hand
}
.tab {
BACKGROUND: url(/webinclude/images/msn/sfb-mb.gif) #1a60a8 repeat-x
}
.tab {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 10px
}
.tab A {
COLOR: #fff
}
.tab A:visited {
COLOR: #fff
}
.tab A:hover {
COLOR: #fff
}.tabsel {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.tabsel {
BACKGROUND: #5aa8da;BORDER-LEFT: #a2d8e9 1px solid;BORDER-TOP: #a2d8e9 1px solid;BORDER-RIGHT: #004e82 1px solid;COLOR: #fff;CURSOR: hand
}
.tabsel A {
COLOR: #fff
}
.tabsel A:visited {
COLOR: #fff
}
.tabsel A:hover {
COLOR: #fff
}
.terms {
COLOR: #fff;BORDER-TOP: #5f90c2 1px solid;FONT-SIZE: 11px;FONT-FAMILY: Tahoma
}
.terms A:hover {
COLOR: #fff
}
.terms A:visited {
COLOR: #fff
}
.sfi {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px
}
.sfi {
BORDER-BOTTOM: #5aa8da 1px solid;BORDER-TOP: #3e9dda 1px solid;FONT-SIZE: 1px
}
.sfi {
BACKGROUND: url(/webinclude/images/msn/sfb-mb.gif) #2b7aba repeat-x
}
.sfi A {
COLOR: #fff
}
.sfi B {
COLOR: #fff
}
.tb {
BACKGROUND: #5aa8da;COLOR: #004e82
}
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="86" height="20" valign="bottom" ><table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="14"> </td>
</tr>
<tr>
<TD class=sfii height=8> </TD>
</tr>
</table></td>
<td width="113"><img src="sft-mb.jpg" width="113" height="44"></td>
<td valign="bottom"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="80" height="23" class="tab" id=MUtd onClick="OnClickTd(0)">view1</td>
<td width="80" height="23" class="tabsel" id=MUtd onClick="OnClickTd(1)">view1</td>
<td class="tab" width="80" id=MUtd onClick="OnClickTd(2)"> </td>
<td class="tab" width="80" id=MUtd onClick="OnClickTd(3)"> </td>
<td class="sfi"> </td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" class="tb" cellpadding="0">
<tr>
<td><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td > </td>
</tr>
<tr>
<td bgcolor="#1a60a8" > </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table></td>
<td > </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table><TABLE id=Table1 height=29 cellSpacing=0 cellPadding=0 width=99% border=0>
<TBODY>
<TR>
<TD class=terms height=29><NOBR> © 2004 Tlp. 保留所有权利。</NOBR> <NOBR></NOBR></TD>
</TR>
</TBODY>
</TABLE>
<p></p>
<script language="javascript">
function OnClickTd(i)
{
for(x=0;x<MUtd.length;x++)
{
if(x!=i)
MUtd[x].className="tab";
else
MUtd[x].className="tabsel";
}
}
</script>
</body>
</html>