最简单纯Java脚本语言实现标签标签页切换的方式（推荐)

先说一下最土的一种方法：

Html:

div class=' tab-head ' H2 id=' tab 1 '在鼠标悬停时=' change tab 1()' class=' selected ' 1/H2 H2 id=' tab 2 '在鼠标悬停时=' changetab 2()' 2/H2 H2 id=' tab 3 '在鼠标悬停时=' change tab 3()' 3/H2/div class=' tab-content ' div id=' C1 ' class=' show ' content 1/div id=' C2 ' content 2/div id=' C3 ' content 3/div/div CSS 333

h2 {边框-顶部：固体矢车菊蓝色1pxborder-left:固体矢车菊蓝色1px宽度： 50px高度： 25px保证金： 0；向左浮动：文本对齐：中心；}.选项卡-内容{边框：固态矢车菊蓝色1px宽度： 152像素；高度： 100像素；}.选项卡-内容分区{显示：无；}.所选{背景色：矢车菊蓝色；}.标签内容。显示{显示：块；} JS:

var标签1=文档。getelementbyid(' tab 1 ')，tab 2=document。getelementbyid(' tab 2 ')，tab 3=document。getelementbyid(' tab 3 ')，c1=document.getElementById('c1 ')，c2=document.getElementById('c2 ')，C3=document。getelementbyid(' C3 ')；函数changetab 1(){ tab 1。类名=“选定”；标签2。类名=' '；标签3。类名=' '；c1。类名='show'c2。类名=' ';c3。类名=' ';}函数ChangeTab 2(){ Tab 1。类名=' '；标签2。类名=“选定”；标签3。类名=' '；c1。类名=' ';c2。类名=' showc3。类名=' ';}功能更改选项卡3(){选项卡1。类名=' '；标签2。类名=' '；标签3。类名=“选定”；c1。类名=' C2。类名=' ';c3。类名=' show}效果：

实现标签的切换，我们很容易想到的一种方式就是给每一个要控制的标签添加id，然后分别编写鼠标事件，使用编号获取每个元素，精确地控制每个元素的样式。

这种方式的缺点显而易见，有几个元素就有几个id，每个标签都要编写功能，里面的方法大同小异。要增加标签的话，还要增加编号和功能，代码冗余，不易扩展。

第二种较为高明些的方法是编写一个功能，将每个元素的序号传进去。

Html:

div class=' tab-head '鼠标悬停时的H2=' change tab(0)' class=' selected ' 1/鼠标悬停时的H2 H2=' change tab(1)' 2/鼠标悬停时的H2 H2=' change tab(2)' 3/H2/div class=' tab-content ' div class=' show ' content 1/div content 2/div content 3/div/div JS:

var tab=文档。getelementsbyclassname(' tab-head ')[0].getElementsByTagName('h2 ')，contents=document。getelementsbyclasname(' tab-content ')[0].getElementsByTagName(' div ')；函数changeTab(index) {for(var i=0，len=tabs.length我透镜；I){ if(I===index){ tab[I].已选择目录[i].显示其他信息.类名=目录[i].className=}}}这样就只要写一个功能了，而且不需要id，但是还是要按照顺序传递参数。

第三种方式和第二种基本一样，只是参数传递的是这指针。

Html:

div class=' tab-head '鼠标悬停时的H2=' change tab(this)=' selected ' 1/鼠标悬停时的H2 H2 H2=' change tab(this)' 2/鼠标悬停时的H2 H2=' change tab(this)' 3/H2/div class=' tab-content ' div class=' show ' content 1/div content 2/div content 3/div/div JS:

var tab=文档。getelementsbyclassname(' tab-head ')[0].getElementsByTagName('h2 ')，contents=document。getelementsbyclasname(' tab-content ')[0].getElementsByTagName(' div ')；函数ChangeTab(tab){ for(var I=0，len=tabs.length我透镜；I){ if(tab[I]===tab){ tab[I].已选择目录[i].显示其他信息.类名=目录[i].className=}}}这种方式稍微方便一些，只要传递这指针，不用按照顺序传递序号，但这也不是最简便的方式。

最简便的一种：

第四种方式：

Html:

div class=' tab-head ' H2 class=' selected ' 1/h22/h2h 23/H2/div div class=' tab-content ' div class=' show ' content 1/div content 2/div content 3/div/div JS:

var tab=文档。getelementsbyclassname(' tab-head ')[0].getElementsByTagName('h2 ')，contents=document。getelementsbyclasname(' tab-content ')[0].getElementsByTagName(' div ')；（函数changeTab(tab) {for(var i=0，len=tabs.length我透镜；I){ tab[I].onmouseover=ShowTab } }))；函数showTab() {for(var i=0，len=tabs.length我透镜；I){ if(tab[I]===this){ tab[I].已选择目录[i].显示其他信息.类名=目录[i].className=}}}这样JS、Html、CSS就完全分离了，通过这指针就可以判断当前鼠标滑过的是哪一个标签了。

以上所述是小编给大家介绍的最简单纯Java脚本语言实现标签标签页切换的方式（推荐),希望对大家有所帮助，如果大家有任何疑问请留言，小编会及时回复大家的，在此也非常感谢大家对我们网站的支持！