js利用tab键切换当前页面_javascript实现tab切换的四种方法

tab切换在网页中很常见，故最近总结了4种实现方法。

首先，写出tab的框架，加上最简单的样式，代码如下：

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

float:left;

}

#tabCon{

clear: both;

}

• 标题一
• 标题二
• 标题三
• 标题四

内容一

内容二

内容三

内容四

现在的显示效果如下图：

四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示……

那么，整体思路很简单，给四个标题绑定事件，触发的时候对应的内容显示，其他的内容隐藏。

方法一：点击标题对应的内容显示，非点击标题对应的内容隐藏。代码如下：

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

}

function tab(pid){

var tabs=["tab1","tab2","tab3","tab4"];

for(var i=0;i<4;i++){

if(tabs[i]==pid){

document.getElementById(tabs[i]).style.display="block";

}else{

document.getElementById(tabs[i]).style.display="none";

}

}

}

• 标题一
• 标题二
• 标题三
• 标题四

内容一

内容二

内容三

内容四

方法二：先设置所有内容隐藏，然后点击标题对用的内容显示。代码如下：

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

float:left;

}

#tabCon{

clear: both;

}

#tabCon_1{

display: none;

}

#tabCon_2{

display: none;

}

#tabCon_3{

display: none;

}

function changeTab(tabCon_num){

for(i=0;i<=3;i++) {

document.getElementById("tabCon_"+i).style.display="none"; //将所有的层都隐藏

}

document.getElementById("tabCon_"+tabCon_num).style.display="block";//显示当前层

}

• 标题一
• 标题二
• 标题三
• 标题四

内容一

内容二

内容三

内容四

方法三：显示和隐藏通过是有拥有class控制，先把所有的内容隐藏dispaly设为none，而该class的display设置为block，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有class，其他的没有。代码如下：

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

float:left;

}

#tabCon {

clear: both;

}

#tabCon div {

display:none;

}

#tabCon div.fdiv {

display:block;

}

• 标题一
• 标题二
• 标题三
• 标题四

内容一

内容二

内容三

内容四

var tabs=document.getElementById("tab").getElementsByTagName("li");

var divs=document.getElementById("tabCon").getElementsByTagName("div");

for(var i=0;i

tabs[i].οnclick=function(){change(this);}

}

function change(obj){

for(var i=0;i

if(tabs[i]==obj){

tabs[i].className="fli";

divs[i].className="fdiv";

}else{

tabs[i].className="";

divs[i].className="";

}

}

}

该方法的缺点是，内容块的div下面不能再有div标签了。

方法四：不用js，用“input:checked”来做tab切换，先把所有的内容隐藏，被选中的内容显示。代码如下：

input:checked实现tab切换

input{

opacity: 0;/*隐藏input的选择框*/

}

label{

cursor: pointer;/*鼠标移上去变成手状*/

float: left;

}

label:hover{

background: #eee;

}

input:checked+label{

color: red;

}

/*选择前面有.tabs input:nth-of-type(x):checked的.panels .panel:nth-child(x)*/

.tabs input:nth-of-type(1):checked~.panels .panel:nth-child(1),

.tabs input:nth-of-type(2):checked~.panels .panel:nth-child(2){

opacity: 1;

}

.panel{

opacity: 0;

position: absolute;/*使内容区域位置一样*/

}

标题一

标题二

内容一

内容二

该方法的缺点是，不同区域切换只能通过点击。

以上就是为大家总结的tab切换实现方法，希望对大家的学习有所帮助，顺着这个思路动手制作自己tab切换特效。