js 如何判断当前选中哪个tab页

2023-03-20 18:30:01JavaScript033

js 如何判断当前选中哪个tab页,第1张

这里分享下js判断当前选中哪个是tab页的方法。

设备：联想电脑

系统：win7

软件：Visual Studio 2017

1、首先来看一下要实现的效果，如下图所示，顶上是tab页卡，下面是内容。

2、然后准备页面的内容，如下图所示，tab运用ul布局，内容运用div布局。

3、接下来就是去除页面中的一些默认间距以及ul的list-style样式，如下图所示。

4、然后定义tab页卡以及内容的相关样式，如下图所示。

5、接着导入所需要的jquery的压缩库文件，如下图所示，版本大家自己选择。

6、最后就是实现选择一个页卡，然后展现页卡内内容的方法，JS实现tab页卡主要是运用了mouseenter的事件方法进行控制显示。

你要的是不是这个效果？如果是的话请向我要图片，没有图片效果可不好，呵呵~

================================

<html>

<head>

//当前选中的页签

var CurrSelNo = 0

//页签的数目

var MaxTabs=6

function HovIt(objname)

{

if(CurrSelNo!=objname)

{

var btn1='tabInfotd'+objname

var btn2=btn1+'R'

document.getElementById(btn1).className = 'tabInfoHovT'

document.getElementById(btn2).className = "tabInfoHovTR"

}

function DefIt(objname)

{

if(CurrSelNo!=objname)

{

var btn1='tabInfotd'+objname

var btn2=btn1+'R'

document.getElementById(btn1).className = 'tabInfoDefT'

document.getElementById(btn2).className = "tabInfoDefTR"

}

function SelIt(objname)

{

var btn1

var btn2

for(i=0i<MaxTabsi++)

{

btn1='tabInfotd'+i

btn2=btn1+'R'

document.getElementById(btn1).className = 'tabInfoDefT'

document.getElementById(btn2).className = "tabInfoDefTR"

document.getElementById('tabInfo_frame'+i).style.display = 'none'

}

btn1='tabInfotd'+objname

btn2=btn1+'R'

document.getElementById(btn1).className = 'tabInfoSelT'

document.getElementById(btn2).className = "tabInfoSelTR"

document.getElementById('tabInfo_frame'+objname).style.display = ''

CurrSelNo = objname

}

</script>

</head>

<body>

.tabInfoDisT{border-width:0px 0px 1px 0pxborder-color:#949878border-style:Solidheight:22pxfont-family:Microsoft Sans Seriffont-size:8ptcolor:Graypadding:2px 0 0 7pxcursor:Defaultbackground:url(images/ig_tab_winXP3.gif) no-repeat left 2px}

.tabInfoSelT{height:22pxfont-family:Microsoft Sans Seriffont-size:8ptcolor:Blackpadding:2px 0 2px 7pxcursor:Defaultbackground:url(images/ig_tab_winXP1.gif) no-repeat left top}

.tabInfoSelTR{width:6pxcursor:Defaultfont-size:2pxbackground:url(images/ig_tab_winXP1.gif) no-repeat right top}

.tabInfoDefT{border-width:0px 0px 1px 0pxborder-color:#949878border-style:Solidheight:22pxfont-family:Microsoft Sans Seriffont-size:8ptcolor:Blackpadding:2px 0 0 7pxcursor:Handbackground:url(images/ig_tab_winXP3.gif) no-repeat left 2px}

.tabInfoDefTR{border-width:0px 0px 1px 0pxborder-color:#949878border-style:Solidwidth:6pxcursor:Handfont-size:2pxbackground:url(images/ig_tab_winXP3.gif) no-repeat right 2px}

.tabInfoHovT{border-width:0px 0px 1px 0pxborder-color:#949878border-style:Solidheight:22pxfont-family:Microsoft Sans Seriffont-size:8ptcolor:Blackpadding:2px 0 0 7pxcursor:Handbackground:url(images/ig_tab_winXP2.gif) no-repeat left 2px}

.tabInfoHovTR{border-width:0px 0px 1px 0pxborder-color:#949878border-style:Solidwidth:6pxcursor:Handfont-size:2pxbackground:url(images/ig_tab_winXP2.gif) no-repeat right 2px}

</style>

<td>

<tr>

</tr>

</table>

</td>

</tr></table></td>

</tr></table></td>

</tr></table></td>

</tr></table></td>

</tr></table></td>