js实现选项卡功能

最新推荐文章于 2024-07-28 20:27:10 发布

秃头码农007

最新推荐文章于 2024-07-28 20:27:10 发布

阅读量69

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_52256892/article/details/120650194

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		ul {
			width: 800px;
			height: 40px;
			background-color: antiquewhite;

		}

		li {
			list-style: none;
			float: left;
			width: 160px;
			display: inline-block;
			text-align: center;
			line-height: 40px;
		}

		.current {
			background-color: #FF0000;

		}

		.item {
			display: none;
		}
	</style>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">产品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="tab_nav">
				<div class="item" style="display: block;">
					产品介绍页面
				</div>
				<div class="item">
					规格与包装页面
				</div>
				<div class="item">
					售后保障页面
				</div>
				<div class="item">
					商品评价页面
				</div>
				<div class="item">
					手机社区页面
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var lis = document.querySelector('ul').querySelectorAll('li');
			var item = document.querySelector('.tab_nav').querySelectorAll('.item');
			for (var i = 0; i < lis.length; i++) {
				//给5个li设置索引号
				lis[i].setAttribute('index', i)
				lis[i].onclick = function() {
					for (var i = 0; i < lis.length; i++) {
						lis[i].className = '';
					}
					this.className = 'current';
					for (var i = 0; i < item.length; i++) {
						item[i].style.display = 'none'
					}
					var index = this.getAttribute('index')
					item[index].style.display = 'block';
				}

			}
		</script>
	</body>
</html>

在这里插入图片描述

秃头码农007

关注

1
点赞
踩
0

收藏

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

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> * { margin: 0; padding: 0; } ul { width: 800px; height: 40px; background-color
复制链接

扫一扫