Javascript之DOM实现选项卡功能

最新推荐文章于 2022-09-16 20:19:21 发布

gxgalaxy

最新推荐文章于 2022-09-16 20:19:21 发布

阅读量643

点赞数 1

分类专栏：前端 JavaScript

本文链接：https://blog.csdn.net/gxgalaxy/article/details/90247642

版权

前端同时被 2 个专栏收录

33 篇文章 1 订阅

订阅专栏

JavaScript

23 篇文章 1 订阅

订阅专栏

定义：

DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和Xml功能的一类对象的集合，也有人称DOM是对HTML以及XML的标准编程接口。

下面我们实现一个简单的选项卡功能：

<!DOCTYPE  html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>demo</title>
	<style>
		.content{
			display: none;
			width:200px;
			height: 200px;
			border:1px solid red;
			margin-top: 10px;
		}
		.active{
			background-color: #008c8c;
		}

	</style>
	</head>
		
		<body>
			<div class="wrapper">
				<button class="active">111</button>
				<button>222</button>
				<button>333</button>
				<div class="content" style="display: block">11111</div>
				<div class="content">22222</div>
				<div class="content">33333</div>
			</div>
			<script type="text/javascript">
				var btn = document.getElementsByTagName('button');
				var div = document.getElementsByClassName('content');
				for(var i = 0; i < btn.length; i++ ){
  					(function(n){
    					btn[n].onclick = function(){
    						for(var j = 0; j < btn.length; j++){
      							btn[j].className = '';
      							div[j].style.display = 'none';
   							 }
    					this.className = 'active';
   					 	div[n].style.display = 'block';
 					 }

 				 }(i))
				}	
			</script>
			
		</body>
	</html>

效果如下图：

点击111：

点击222：

点击333：

gxgalaxy

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javascript之DOM实现选项卡功能

定义：DOM定义了表示和修改文档所需的方法，DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和Xml功能的一类对象的集合，也有人称DOM是对HTML以及XML的标准编程接口。下面我们实现一个简单的选项卡功能：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF...
复制链接

扫一扫