javascript实现tab切换的四种方法

Posted 2022-12-14 qikexun

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript实现tab切换的四种方法相关的知识，希望对你有一定的参考价值。

总结了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>

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

以上是关于javascript实现tab切换的四种方法的主要内容，如果未能解决你的问题，请参考以下文章

javascript数据类型及数据类型判断的四种方法

JavaScript函数的四种存在形态

JavaScript中判断数据类型的四种方法

javascript中函数的四种调用模式详解

javascript HTML静态页面传值的四种方法