高分求Tab选项卡窗体Demo~~

huaer1011 2008-01-17 02:44:49

我现在写的Tab选项卡有点点问题~
想求各位大侠可否用Div的方法教教小女子如何制作Tab选项卡窗体~~~

...全文

262 18 打赏收藏转发到动态举报

写回复

用AI写文章

18 条回复

切换为时间正序

请发表友善的回复…

发表回复

huaer1011 2008-01-21

打赏
举报

确实不过如此嘛~
还不让人说实话,这年头~
不是说你会就可以...
哎,算了,不说了,伤和气~
我只是求个答案~

WNASP 2008-01-21

打赏
举报

用Javascript来做了
比如
obj.style.display = "";
obj.style.display = "none";

LikeCode 2008-01-21

打赏
举报

QUOTE:LikeCode 以为你ＲＰ很好,原来只不过如此～
-----------------------
竹子在CSDN所做所为众所周知,不需要你妄加评论,谢谢!

huaer1011 2008-01-21

打赏
举报

自己解决了,不过还是谢谢各位的鼎立相助～
LikeCode 以为你ＲＰ很好,原来只不过如此～
不过还是谢谢大家～

LikeCode 2008-01-17

打赏
举报

那要找个老师一步步教你才行了。

yangzhou710 2008-01-17

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>一个非常漂亮的菜单条</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.3132" name=GENERATOR></HEAD>
<BODY onclick=changeTabs() bgColor=#fef4d9 onload=init()>
<STYLE>.conts {
VISIBILITY: hidden
}
.tab {
BORDER-RIGHT: gray thin solid; BORDER-TOP: #e0e0e0 thin solid; FONT-WEIGHT: normal; FONT-SIZE: 10pt; BORDER-LEFT: #e0e0e0 thin solid; FONT-FAMILY: Verdana; TEXT-ALIGN: center
}
.selTab {
BORDER-RIGHT: black thin solid; BORDER-TOP: white thin solid; FONT-WEIGHT: bold; BORDER-LEFT: white thin solid; TEXT-ALIGN: center
}
</STYLE>

<SCRIPT language=JavaScript>

//a public function that the container uses to pass in values for the labels
function public_Labels(label1, label2, label3, label4, label5, label6, label7){

t1.innerText = label1;
t2.innerText = label2;
t3.innerText = label3;
t4.innerText = label4;
t5.innerText = label5;
t6.innerText = label6;
t7.innerText = label7;
}

//a public function that the container uses to pass in values for the card containers
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){

t1Contents.innerHTML = contents1;
t2Contents.innerHTML = contents2;
t3Contents.innerHTML = contents3;
t4Contents.innerHTML = contents4;
t5Contents.innerHTML = contents5;
t6Contents.innerHTML = contents6;
t7Contents.innerHTML = contents7;

init();
}

//sets the default display to tab 1
function init(){
tabContents.innerHTML = t1Contents.innerHTML;
}

//this is the tab switching function
var currentTab;
var tabBase;
var firstFlag = true;

function changeTabs(){

if(firstFlag == true){
currentTab = t1;
tabBase = t1base;
firstFlag = false;
}

if(window.event.srcElement.className == "tab"){

currentTab.className = "tab";

tabBase.style.backgroundColor = "white";

currentTab = window.event.srcElement;

tabBaseID = currentTab.id + "base";

tabContentID = currentTab.id + "Contents";

tabBase = document.all(tabBaseID);

tabContent = document.all(tabContentID);

currentTab.className = "selTab";

tabBase.style.backgroundColor = "";

tabContents.innerHTML = tabContent.innerHTML;

}
}

</SCRIPT>

<DIV
style="BORDER-RIGHT: gray thin; BORDER-TOP: gray thin; LEFT: 25px; BORDER-LEFT: gray thin; WIDTH: 500px; BORDER-BOTTOM: gray thin; POSITION: absolute; TOP: 40px; HEIGHT: 350px">
<TABLE style="WIDTH: 100%; HEIGHT: 250px" cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=selTab id=t1 height=25>tab 1</TD>
<TD class=tab id=t2>tab 2</TD>
<TD class=tab id=t3>tab 3</TD>
<TD class=tab id=t4>tab 4</TD>
<TD class=tab id=t5>tab 5</TD>
<TD class=tab id=t6>tab 6</TD>
<TD class=tab id=t7>tab 7</TD></TR>
<TR>
<TD id=t1base style="BORDER-LEFT: white thin solid; HEIGHT: 2px"></TD>
<TD id=t2base style="HEIGHT: 2px; BACKGROUND-COLOR: white"></TD>
<TD id=t3base style="HEIGHT: 2px; BACKGROUND-COLOR: white"></TD>
<TD id=t4base style="HEIGHT: 2px; BACKGROUND-COLOR: white"></TD>
<TD id=t5base style="HEIGHT: 2px; BACKGROUND-COLOR: white"></TD>
<TD id=t6base style="HEIGHT: 2px; BACKGROUND-COLOR: white"></TD>
<TD id=t7base
style="BORDER-RIGHT: white thin solid; HEIGHT: 2px; BACKGROUND-COLOR: white"></TD></TR>
<TR>
<TD id=tabContents
style="BORDER-RIGHT: white thin solid; BORDER-LEFT: white thin solid; BORDER-BOTTOM: white thin solid"
colSpan=7 height=*>sample contents</TD></TR></TBODY></TABLE></DIV>
<DIV class=conts id=t1Contents>This text is on tab one</DIV>
<DIV class=conts id=t2Contents>This text is on tab two</DIV>
<DIV class=conts id=t3Contents>This text is on tab three</DIV>
<DIV class=conts id=t4Contents>This text is on tab four</DIV>
<DIV class=conts id=t5Contents>This text is on tab five</DIV>
<DIV class=conts id=t6Contents>This text is on tab six</DIV>
<DIV class=conts id=t7Contents>This text is on tab seven</DIV></BODY></HTML>

tanshiyang82 2008-01-17

打赏
举报

帮顶～

chenguang79 2008-01-17

打赏
举报

楼主用显示和隐藏Panel来完成不行吗

luq885 2008-01-17

打赏
举报

不知道你是不是想要
http://www.inpai.com.cn/
这里面的tab效果，这个是用table做的，用div也一样，只用js就可以做到，关键是控制div的位置

huaer1011 2008-01-17

打赏
举报

嗯~~，
看来我找不到合适的答案了~
我整个Tab选项都是通过Div来做的~
我试着往那四个Tab上面加容器，可显示出来的效果又不对了~
嗯，我再搜搜吧~
继续等待好答案中~ -:)

gagayt 2008-01-17

打赏
举报

前面四个在一个页面的用server的table 隐藏table就可实现(js隐藏iframe),
不在一个页面的弄个连接js加载就行了(iframe里面),具体代码网上很多只要搜js控制iframe就哦了

IT流渊 2008-01-17

打赏
举报

你可以在tab中添加页面框架的，这样刷新就不会影响到tab页面了

huaer1011 2008-01-17

打赏
举报

谢谢楼上的up~
没人理小人了~~~

lishijie910123 2008-01-17

打赏
举报

huaer1011 2008-01-17

打赏
举报

多谢竹子的Demo，
不过和我的还有一点距离~
我现在有6个Tab选项卡，
其实前面4个选项卡是同一个页面的内容~(将同一个页面拆分为4个Tab选项卡)
第一个选项卡为文本信息
第二个为GridView
第三个也为文本信息
第四个为GridView
另外两个页面分别是单独的页面~如baidu or google
现在我将第二个GridView设为初始的活动Tab
现在问题是：点击了第四个选项卡中的GridView的编辑按钮，它又回到初始活动Tab了~~
这个问题如何解决啊？

多谢~~

huaer1011 2008-01-17