JS代码实现选项卡功能

最新推荐文章于 2023-07-01 18:20:34 发布

米兰小铁匠1990

最新推荐文章于 2023-07-01 18:20:34 发布

阅读量853

点赞数 1

分类专栏：前端 JS 选项卡文章标签： JS代码实现选项卡功能

本文链接：https://blog.csdn.net/weixin_44427236/article/details/87017841

版权

前端同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

选项卡

1 篇文章 0 订阅

订阅专栏

在平时的网页开发中会遇到很多选项卡功能的情况，下面通过一个简单的例子说明选项卡如何实现
首先，选项卡基本的样式会有可以点击的选项按钮，以及按钮对应的显示内容。这是一个基本的选项卡应该具备的两大部分。所以我在结构的布局上选用：
1、一个大DIV中套有三个button，三个小div。
2、内部样式中将三个小div全部display none。三个button的北京颜色全部设置成一个灰色（举例子）
3、在内联样式中设置第一个button的背景颜色为红色（举例子），第一个div的display为block
具体JS，html，css代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#div1 button{ width: 100px; height: 30px; background-color: gray; font-size: 18px; color: white}
			#div1 .active{background-color: orange}
			#div1 div{
				width: 400px; height: 400px; border: 1px solid black; background-color: gray; display: none
			}
		</style>
		<script src = 'jquery-1.10.1.min.js'></script>
		<script>
			
			window.onload = function(){
				var oDiv1 = document.getElementById("div1");
				var aBtns = oDiv1.getElementsByTagName("button");
				var aDivs = oDiv1.getElementsByTagName("div");


				//1、给每一个按钮添加点击事件
				for(var i = 0; i < aBtns.length; i++){
					aBtns[i].index = i;
					aBtns[i].onclick = function(){

						//2、先将所有按钮的样式取消
						for(var j = 0; j < aBtns.length; j++){
							aBtns[j].className = '';
							aDivs[j].style.display = "none";
						}

						this.className = 'active';
						//3、找到按钮对应下标的div，显示出来
						aDivs[this.index].style.display = 'block';
					}
				}

			}

			$(function(){
				$("#div1").find("button").click(function(){
					$("#div1").find("button").attr("calss", "");
					$(this).attr("class", "active");

					$("#div1").find("div").css("display", "none");
					$("#div1").find("div").eq($(this).index()).css("display", "block");
				})
			})
		</script>
	</head>
	<body>
		<div id = 'div1'>
			<button class = 'active'>钢铁侠</button>
			<button>蜘蛛侠</button>
			<button>绿灯侠</button>
			<div style = 'display: block'>《钢铁侠》（Iron Man）是由美国漫威电影工作室出品的一部科幻冒险电影，改编自同名系列漫画，由乔恩·费儒执导，小罗伯特·唐尼及格温妮斯·帕特洛、杰夫·布里吉斯等主演。该作也是“漫威电影宇宙”系列的首部电影。该片于2008年5月2日在美国上映。影片讲述了托尼·斯塔克在遇难后改进了盔甲的功能，化身“钢铁侠”，以一个义务警察的身份保护了这个世界和平的故事。</div>
			<div>蜘蛛侠（Spider-Man）是美国漫威漫画旗下超级英雄，由编剧斯坦·李和画家史蒂夫·迪特科联合创造，初次登场于《惊奇幻想》（Amazing Fantasy）第15期（1962年8月），因为广受欢迎，几个月后，便开始拥有以自己为主角的单行本漫画。他本名彼得·本杰明·帕克（Peter Benjamin Parker），是住在美国纽约皇后区的一名普通高中生，由于被一只受过放射性感染的蜘蛛咬伤，因此获得了蜘蛛一样的超能力，后自制了蛛网发射器，化身蜘蛛侠（Spider-Man）守卫城市。</div>
			<div>影片改编自DC漫画公司漫画，由马丁·坎贝尔执导，迈克尔·戈登伯格和迈克尔·格林担任编剧，瑞安·雷诺兹、布蕾克·莱弗利、彼得·萨斯加德和马克·斯特朗联袂出演，影片于2011年6月17日在美国上映。影片讲述宇宙间有一群维护宇宙治安的“绿灯军团”，每个成员都配备了一枚神奇的戒指，可以随心所欲的变出各种东西或实现任何目的。哈尔·乔丹原本是一名试飞员，后来被绿灯侠的戒指召唤成为“绿灯侠”，负责保卫地球和银河</div>
		</div>
	</body>
</html>