tabpane1联动html,TabPane 选项卡-CSDN博客

这段代码展示了如何使用JavaScript创建一个动态的选项卡菜单，菜单包含多个内容项，如'第一项'、'图片世界'等。用户可以通过鼠标点击切换不同的内容显示，同时有自定义的样式和高度调整功能。此实现适用于网页前端交互设计。

摘要由CSDN通过智能技术生成

var Num=4; //这里是增加选项卡的数目

var carNum=2+Num

function document.onselectstart()

{

var obj=event.srcElement

if(obj.tagName=="SPAN")

{

return false;

}

function document.onmousedown()

{

var obj=event.srcElement

var pobj=obj.parentElement.id;

if(obj.className=="span")

{

for(i=1;i

{

if(pobj==("btn"+i))

{

document.all("td"+i).style.backgroundColor="menu"

document.all("btn"+i).style.height=20

content(i)

}

else

{

document.all("td"+i).style.backgroundColor="white"

document.all("btn"+i).style.height=18

}

function content(i)

{

//这里是菜单名

mnuItem(1,"第一项")

mnuItem(2,"图片世界")

mnuItem(3,"第三个内容")

mnuItem(4,"表格")

mnuItem(5,"滚动字幕")

//End

if(i==1)

{

span1.innerHTML="男女
"

+""

}

if(i==2)

{

span1.innerHTML=""

}

if(i==3)

{

span1.innerHTML="

第三个内容

if(i==4)

{

span1.innerHTML="

aaaaaaaa"

bbbbbbbb"

ccccccccc"

}

if(i==5)

{

span1.innerHTML=""

+"这是第五个内容"

+"啦啦..？"

}

function mnuItem(i,con)

{

document.all("MenuName"+i).innerText=con

}

.span{

cursor:default;

padding-left:5;

padding-top:2;

padding-right:5;

padding-bottom:0;

width:100%;

height:100%;

}

for(i=2;i

{

tdBody="

tdBody+="

tdBody+=""

tdBody+="

tdBody+=""

tdBody+="

tdBody+=""

tdBody+="

tdBody+=""

tdBody+="";

document.write(tdBody)

}