javascript实现tab切换的四种方法

最新推荐文章于 2024-05-07 11:25:37 发布
最新推荐文章于 2024-05-07 11:25:37 发布
阅读量1.7k 收藏 6
点赞数 2
分类专栏： js
原文链接：zhao123.top
版权

总结了4种实现方法。

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

<!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>

 </div>

 </body>

 </html>

现在的显示效果如下图：

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

<!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>

 </div>

 </body>

 </html>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

<!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>

</div>

</body>

</html>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

<!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>

</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切换，先把所有的内容隐藏，被选中的内容显示。代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

<!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>

</div>

</div>

</body>

</html>

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

qikexun
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现Tab标签页切换的最简便方式(4种)
10-15
主要介绍了JavaScript实现Tab标签页切换的最简便方式(4种)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
javascript实现tab切换的方法（2）
weixin_30807677的博客
03-16 538
方法三：显示和隐藏通过是有拥有class控制，先把所有的内容隐藏dispaly设为none，而该class的display设置为block，遍历所有标题节点和内容节点，点击标题后，该标题节点和对用的内容节点拥有class，其他的没有。 <html> <head> <meta http-equiv="Content-Type" content="...
2024年最全前端实现tab栏切换，这么常见的案例你学会了吗？(1)，html的常用标签
最新发布
2401_84411557的博客
05-07 688
如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】上期传送门：👉初识 JavaScript（揭开javascript的神秘面纱）👉javascript中的数据类型👉javascript中的数据类型转换👉javascript 基础案例（循环）👉。
JS如何实现Tab切换？
yihuliunian的博客
06-09 250
转载自品略图书馆http://www.pinlue.com/article/2018/12/0521/277781036306.html tab切换在各个网页中是很常见的一种js效果，在我们学习JS的过程中，这个效果也是我们必须要学会的，下面是它的代码； <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"..
如何利用原生js实现tab栏切换呢？
编程那些事
03-27 807
原理：先准备一个导航栏tab_list盒子和一个装有tab内容的tab_content盒子，tab_content盒子可以装多个内容盒子，通过js给上面的所有li（即选项卡）注册点击或鼠标经过事件事件 ** 最核心的地方在于：我们应该如何让上面选项卡与下面的内容一一对应呢?** 我们应该给每一个li盒子通过js设置一个自定义属性（索引号index），通过这个自定义属性index，当我们...
javascript实现tab页的切换
Serena_tz的博客
09-26 714
至少传入两个参数，第一个是面板标题的父级的ID，第二个是面板的父级的ID，另外两个参数有默认值，可以根据需要传入。需要高亮显示的类名默认用"on"，也可以根据需要传入，具体说明可看注释。 代码如下： /* * tab切换页： * tab("面板标题的父级的ID","面板父级的ID","触发事件的类型","高亮显示的类") * 可以传入2-4四个参数,如果后两个参数没有传入,那么默认触发事件的类型为点击事件，默认的高亮的类请用"on",如果需要自定义高亮的类请传入第四个参数
javascript的tab切换原理与效果实现方法
10-24
下面我们将深入探讨 JavaScript 实现 Tab 切换的原理与方法，并通过实例分析来理解其工作流程。 首先，让我们了解 Tab 切换的基本原理。在网页中，我们通常有多个内容区域（如段落 `<p>`），这些内容区域默认情况下...
基于javascript实现tab切换特效
10-22
主要介绍了基于javascript实现tab切换特效的相关资料,具有一定的参考价值，需要的朋友可以参考下
JavaScript实现tab栏切换效果
10-15
JavaScript 实现的 Tab 切换效果是一种常见的网页交互设计，用于在不同的内容区域之间进行切换，通常用在页面顶部或侧边的导航菜单。在这个例子中，我们将详细讲解如何使用 JavaScript 和 CSS 实现这一功能。 首先...
JS Tab切换 选项卡 五种方法
xdea的专栏
01-11 614
一、遍历ID法 css： body,h2{margin:0;} body{font:12px/1.5 "宋体",tahoma,arial;} h2{width:500px;height:50px;margin:100pxauto0;color:red;border:1px solid gray;} h2 span{width:80px;height:50px;line-height:50
JS实现Tab切换，超简单只有几行代码
03-27
JS实现Tab切换，超简单只有几行代码，点击按钮，在同一页面的不同内容切换
tabs.js:一些非常漂亮的javascript标签
05-16
tabs.js 一些非常漂亮的javascript标签。 演示版 目前没有正式的演示。 要查看这些选项卡的运行情况，可以下载Subtext Editor（为其编写应用程序）。 用法 只需在您的html中包含javascript和css，然后按如下所示启动标签即可： var tabs = new Tabs ( { shell : $ ( '.tabs' ) , minWidth : 45 , maxWidth : 180 } ) ; 用您选择的选择器替换.tabs 。 这是选项卡所在的位置。 您可以在不同的选择器上创建多个选项卡实例。 他们目前无法相互互动，但它们都会起作用。 启动标签页会自动添加一个标签页。 要添加更多标签，请执行以下操作： var tab = tabs . add ( { title : 'This is a tab' } ) ; 选项卡的宽度基于其
javascript实现tabs选项卡切换效果(自写原生js)
10-27
常用的页面效果有弹出层效果，无缝滚动效果，选项卡切换效果，接下来与大家分享一款自己用原生javascript写的选项卡切换效果，感兴趣的朋友可以参考下哈
js实现选项卡Tabs-软通乐学
JsonWuxin的博客
08-29 340
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项卡Tabs</title> <style type="text/css"> * { margin: 0; padding: 0; } #nav { width: 100%; } #nav ul { paddin
利用JavaScript实现tab页面切换效果
qq_68195068的博客
03-29 435
【代码】利用JavaScript实现tab页面切换效果。
javascrTab切换
m0_59359854的博客
06-27 83
tab切换选项卡复用
原生js实现tab选项卡切换
极致孤独的博客
04-10 1117
怎么说呢，最近在写一个后台管理模板，发现以前写的tab切换现在有点达不到自己心里的标准，所以就重新写了一个，本着拥抱原生js的原则，就放弃了jQuery。下面废话不多说，先看一下效果图吧： 看一下效果图，如果是您想要的话，那么您再继续往下面看，算了，还是直接一点直接上代码吧，下面代码不依赖任何插件，也就是说，您直接复制一下打开就能看效果啦。 <!DOCTYPE html> <h...
JS实现Tab标签（选项卡）切换效果
yansong_8686的专栏
08-21 2319
最近在做一个既能批量导入，也能单个录入的功能，具体实现是在一个jsp页面中采用了一个tab标签，具体效果如下： 点击鼠标可以切换，具体实现如下： div{ font-size:12px; font-family: Verdana, Arial, Helvetica, sans-serif; } /**/ ul.TabBarLevel{ lis
javascript实现tab切换
05-14
HTML 结构： ```html <div class="tab-container"> <ul class="tab-nav"> <li class="active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> </ul> <div class="tab-content"> <div class="tab-panel active">Tab 1 content</div> <div class="tab-panel">Tab 2 content</div> <div class="tab-panel">Tab 3 content</div> </div> </div> ``` CSS 样式： ```css .tab-nav { display: flex; list-style: none; margin: 0; padding: 0; } .tab-nav li { cursor: pointer; margin-right: 10px; padding: 10px; border: 1px solid #ccc; } .tab-nav li.active { background-color: #ccc; } .tab-content .tab-panel { display: none; padding: 10px; } .tab-content .tab-panel.active { display: block; } ``` JavaScript 实现： ```javascript const tabNav = document.querySelector('.tab-nav'); const tabPanels = document.querySelectorAll('.tab-panel'); tabNav.addEventListener('click', (event) => { const target = event.target; if (target.tagName.toLowerCase() === 'li') { const index = Array.prototype.indexOf.call(tabNav.children, target); if (index >= 0) { // 切换选中状态 for (let i = 0; i < tabNav.children.length; i++) { tabNav.children[i].classList.remove('active'); tabPanels[i].classList.remove('active'); } target.classList.add('active'); tabPanels[index].classList.add('active'); } } }); ``` 以上代码实现了一个简单的 Tab 切换效果。当点击 Tab 标签时，会切换对应面板的显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值