JS实现选项卡切换

最新推荐文章于 2024-05-24 21:00:15 发布
最新推荐文章于 2024-05-24 21:00:15 发布
阅读量7.2k 收藏 29
点赞数 6
分类专栏： JavaScript 文章标签： js选项卡 选项卡切换
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/BigDaruizi/article/details/81783505
版权

   下面是用JS简单地实现选项卡功能的实例。

  注意点：（1）闭包后，要使用立即执行函数；

                （2）绑定事件注意参数；

                （3）思路：将当前div显示，其余隐藏，给button绑定事件，触碰后显示相应内容。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>选项卡练习</title>
		<!--CSS样式-->
		<style type="text/css">
			.wrapper {
				box-shadow: -2px 0 5px lightsteelblue, 0 -2px 5px lightsteelblue, 0 2px 5px lightsteelblue, 2px 0 5px lightsteelblue;
				height: 450px;
				width: 533px;
			}
			
			.content {
				display: none;
				width: 530px;
				height: 395px;
				margin-top: 8px;
				box-shadow: -2px 0 5px gray, 0 -2px 5px gray, 0 2px 5px gray, 2px 0 5px gray;
			}
			/*点击该按钮的时候显示该颜色*/
			
			.active {
				background-color: lightsteelblue;
			}
			
			button {
				background-color: lightseagreen;
				margin-top: 5px;
				list-style-type: none;
				width: 125px;
				height: 40px;
				font-family: "新宋体";
				font-size: 18px;
				border: none;
				box-shadow: -2px 0 5px lightsteelblue, 0 -2px 5px lightsteelblue, 0 2px 5px lightsteelblue, 2px 0 5px lightsteelblue;
			}
			
			button:first-child {
				margin-left: 10px;
			}
		</style>
	</head>

	<body>
		<!--布局样式-->
		<div class="wrapper">
			<!--选项卡-->
			<button class="active">选项卡一</button>
			<button>选项卡二</button>
			<button>选项卡三</button>
			<button>选项卡三</button>
			<div class="content" style="display: block;">
				<img src="img/pic-one.png" />
			</div>
			<div class="content">
				<img src="img/pic-two.png" />
			</div>
			<div class="content">
				<img src="img/pic-three.png" />
			</div>
			<div class="content">
				<img src="img/pic-fou.png" />
			</div>
		</div>
		<!--JS代码-->
		<script type="text/javascript">
			// 将按钮和盒子拿出来
			var btn = document.getElementsByTagName('button');
			var div = document.getElementsByClassName('content');
			// 每一个button上面绑定事件
			for(var n = 0; n < btn.length; n++) {
				//生成闭包的立即函数
				(function(i) {
					btn[n].onclick = function() {
						for(var m = 0; m < btn.length; m++) {
							btn[m].className = ""; //清空效果
							div[m].style.display = "none";
						}
						//当前点击的button设置变化
						this.className = "active";
						div[i].style.display = "block";
					}
				}(n))
			}
		</script>
	</body>
</html>

 演示效果：

                                                                                                                                                           元气少女，加油！ 

大瑞子
关注
  • 6
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS练习--选项卡切换
lmd_hdx的博客
06-27 362
选项卡切换
JS 实现选项卡切换
u013993319的博客
07-17 440
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实践题 - 选项卡</title> <style type="text/css"> /* CSS样式制作 */ *{padding: 0;margin:0;} ul{list-style:
JavaScript编程实现tab选项卡切换的效果+1
Purpleendurer@CSDN
04-11 2096
网页中的tab选项卡切换效果一般是使用和匹配来实现的。如果在中嵌套了，和的匹配关系可能就会被打乱，这样显示时就可能出现问题。
什么是选项卡
最新发布
Li370234940的博客
05-24 478
例如，在Microsoft Excel中，选项卡被用作功能区的导航，包含了“剪贴板”、“字体”、“对齐方式”、“数字”、“样式”、“单元格”和“编辑”等七个组，帮助用户更好地管理和操作数据。在浏览器中，选项卡是常见的一个功能，比如Internet Explorer和Microsoft Edge都使用了选项卡浏览，用户可以通过点击或者拖动来在不同的网页之间进行切换。浏览器中的网页浏览：在浏览器中，选项卡被广泛用于同时打开多个网页，用户可以通过单击不同的选项卡来切换这些网页。编写JavaScript代码。
简单实现js选项卡切换效果
12-11
本文实例为大家分享了js选项卡切换效果的具体代码，供大家参考，具体内容如下 实现思路： 1、首先获取id元素。 2、for循环历遍按钮元素添加onclick事件。 3、排他思想，点击按钮时设置所有选项卡按钮样式为空，利用this关键字指定当前选项卡获得高亮样式。 4、下面的多个div内容块以此类推。 源代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的选项卡切换（仿Hao123导航）</title> </head> <style> * { margin: 0; padd
js实现选项卡
qq_52440306的博客
09-23 6910
选项卡在网页中经常使用，那么如何实现选项卡呐？ 现在的框架省去dom操作，开发者只需要关注数据即可，那么真的不需要操作dom了吗，是需要的，只不过程序已经帮忙做了这件事，纯粹的数据逻辑也将前端变得更难了。 整体结构 <div class="app" id="app"> <div class="key-left"> <div class="tap">1</div> <div class="tap">2</div>
JS-----选项卡切换
qq_63322025的博客
08-27 3767
tab选项卡如何实现切换，其中涉及获取元素的内容并修改，循环，遍历知识
JS实现选项卡功能
qingdouxiaohua的博客
09-19 671
这里有3个按钮，点击哪个按钮出现哪个按钮的内容，再点的话内容的就取消了。这也是一个很好玩的一个小功能。
JS实现选项卡效果
m0_46647730的博客
06-30 316
选项卡
js实现tab选项卡切换功能
10-20
在JavaScript中实现tab选项卡切换功能是一项常见的网页交互设计任务，它能够为用户提供更好的浏览体验。本示例代码详细展示了如何使用纯JS来创建一个简单的选项卡切换效果，主要包括以下几个关键知识点： 1. HTML...
JavaScript实现Tab选项卡切换
12-28
本文实例为大家分享了js实现选项卡切换的具体代码，供大家参考，具体内容如下 会用到原生js的dom操作 html <body> <li class=seclect>1 <li>2 <li>3 <li>4 <li>5 <li>1 <l
Vue.js tab实现选项卡切换
10-19
在本示例中，它被用来实现选项卡切换功能。选项卡切换是用户界面设计中常见的一种交互方式，它允许用户在多个视图或内容之间进行切换，而这些内容通常被组织在一个有限的空间内。 在Vue.js中，我们可以创建自定义...
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
js选项卡切换
qq_47243637的博客
01-05 361
js选项卡切换
利用JS实现简单选项卡功能
TianXuab的博客
07-01 971
函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。函数，实现了选项卡的切换功能。在点击选项卡按钮时，该函数会隐藏所有选项卡的内容，并将选项卡按钮的样式设置为未激活状态。然后，根据指定的选项卡名称显示对应的选项卡内容，并将该选项卡按钮的样式设置为激活状态。在以上示例中，通过定义。在以上示例中，通过定义。
JS选项卡
xing942012的博客
11-25 2431
我们做一个简易的选项卡，但是适用所有的选项卡（自改），首先我们来先把页面基本样式写好 <ul> <li class="active">周一</li> <li>周三</li> <li>周五</li> </ul> <div class="box1 block">医务科</div> <div class="box2">警卫科</div>
用js实现选项卡的功能
有趣的灵魂万里挑一,好看的皮囊你又没有
04-06 687
用js实现选项卡功能。
【JavaScript】实现网页中的选项卡
qq_55930097的博客
07-21 850
总体而言，此代码允许选项卡式导航，单击选项卡将激活它并显示其相应的内容。//this表示当前点击的这一个项目，该索引用于标识 oHeaderItems 和 oBoxItems 中的相应项。// for 循环用于从 oHeaderItems 和 oBoxItems 中的所有项中的active。// 点击第一个选项卡时，将点击效果添加到自身，并从第二个选项卡中删除点击效果。// 点击第二个选项卡时，将点击效果添加到自身，并从第一个选项卡中删除点击效果。//给当前选中的选项卡加上active。
js实现tab选项卡切换
05-30
好的，以下是一个简单的JavaScript实现选项卡切换的示例代码： HTML部分： ```html (event, 'tab1')">选项卡1 (event, 'tab2')">选项卡2 (event, 'tab3')">选项卡3 选项卡1的内容 选项卡2的内容 选项...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值