从前慢现在也慢

这个屌丝很懒，什么也没留下！

热门标签

javascript实现tab切换的四种方法_js tabs

作者：从前慢现在也慢 | 2024-02-11 20:41:48

踩

js tabs

总结了4种实现方法。

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

float:left;

}

#tabCon{

clear: both;

}

</style>

</head>

<body>

<div id="tanContainer">

<div id="tab">

<ul>

<li>标题一</li>

<li>标题二</li>

<li>标题三</li>

<li>标题四</li>

</ul>

</div>

<div id="tabCon">

<div>内容一</div>

<div>内容二</div>

<div>内容三</div>

<div>内容四</div>

</div>

</body>

</html>

现在的显示效果如下图：

四个tab标题和四个内容区都显示在了页面中，现在要实现tab切换效果，即点击标题一，内容一显示出来，其他内容不显示；点击标题二，内容二显示出来，其他内容不显示……
那么，整体思路很简单，给四个标题绑定事件，触发的时候对应的内容显示，其他的内容隐藏。

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

}

</style>

<script>

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";

}

</script>

</head>

<body>

<div id="tanContainer">

<div id="tabNav">

<ul>

<li onclick="tab('tab1')">标题一</li>

<li onclick="tab('tab2')">标题二</li>

<li onclick="tab('tab3')">标题三</li>

<li onclick="tab('tab4')">标题四</li>

</ul>

</div>

<div id="tab">

<div id="tab1">内容一</div>

<div id="tab2">内容二</div>

<div id="tab3">内容三</div>

<div id="tab4">内容四</div>

</div>

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

*{

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;

}

</style>

<script>

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";//显示当前层

}

</script>

</head>

<body>

<div id="tanContainer">

<div id="tab">

<ul>

<li onclick="changeTab('0')">标题一</li>

<li onclick="changeTab('1')">标题二</li>

<li onclick="changeTab('2')">标题三</li>

<li onclick="changeTab('3')">标题四</li>

</ul>

</div>

<div id="tabCon">

<div id="tabCon_0">内容一</div>

<div id="tabCon_1">内容二</div>

<div id="tabCon_2">内容三</div>

<div id="tabCon_3">内容四</div>

</div>

</body>

</html>

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style>

*{

padding: 0;

margin: 0;

}

li{

list-style: none;

float:left;

}

#tabCon {

clear: both;

}

#tabCon div {

display:none;

}

#tabCon div.fdiv {

display:block;

}

</style>

</head>

<body>

<div id="tanContainer">

<div id="tab">

<ul>

<li class="fli">标题一</li>

<li>标题二</li>

<li>标题三</li>

<li>标题四</li>

</ul>

</div>

<div id="tabCon">

<div class="fdiv">内容一</div>

<div>内容二</div>

<div>内容三</div>

<div>内容四</div>

</div>

</body>

<script>

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

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

for(var i=0;i<tabs.length;i++){

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

}

function change(obj){

for(var i=0;i<tabs.length;i++){

if(tabs[i]==obj){

tabs[i].className="fli";

divs[i].className="fdiv";

}else{

tabs[i].className="";

divs[i].className="";

}

</script>

</html>

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

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

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>input:checked实现tab切换</title>

<style>

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;/*使内容区域位置一样*/

}

</style>

</head>

<body>

<div class="tabs">

<input checked id="one" name="tabs" type="radio">

<label for="one">标题一</label>

<input id="two" name="tabs" type="radio">

<label for="two">标题二</label>

<div class="panels">

<div class="panel">

<p>内容一</p>

</div>

<div class="panel">

<p>内容二</p>

</div>

</body>

</html>

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/76880