简单js选项卡

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

秃头小hen

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

阅读量92

点赞数

本文链接：https://blog.csdn.net/weixin_46388469/article/details/104962163

版权

上图：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡2</title>
		<style type="text/css">
			.selectItem {
				float: left;
				width: 10%; 
				height: 30px;
				text-align: center;
				font-size: 20px;
				cursor: pointer;
				min-width: 100px;
			}
			
			.cardItem {
				width: 30%;
				height: 100px;
				font-size: 20px;
				min-width: 300px;
				
			}
			
			.hide {
				display: none;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				// 获取所有的选项
				var selectItems = document.getElementById("selectItemContainer").getElementsByTagName("div");
				// 获取所有选项卡
				var selectCards = document.getElementById("cardContainer").getElementsByTagName("div");
				
				// 建立索引
				var selectIndex = 0;
				// 给选项卡附上 索引
				for (var i = 0; i < selectCards.length; i++ ){
					selectItems[i].index = i;
					selectCards[i].index = i;
				}
				// 给选项卡添加点击事件
				for (var i =0; i < selectCards.length; i++){
					selectItems[i].onclick = function(){
						// 将当前选中的卡 隐藏
						selectCards[selectIndex].className = "cardItem hide";
						// 点中的选项对应的卡 显示
						selectCards[this.index].className = "cardItem"
						// 修改当前的索引
						selectIndex = this.index;
					}
				}
			}
		</script>
		

	</head>
	<body>
		<div id="selectCard">
			<div id="selectItemContainer">
				<div class="selectItem" style="background-color: #FF0000;">套餐一</div>
				<div class="selectItem" style="background-color: #00BFFF;">套餐二</div>
				<div class="selectItem" style="background-color: gold;">套餐三</div>
				<div style="clear:both;"></div> 
			</div>
			
			<div id="cardContainer">
				<div class="cardItem" style="background-color: #FF0000;">
					每月10G流量 月租50元
				</div>
				<div class="cardItem hide" style="background-color: #00BFFF;">
					每月20G流量 月租100元
				</div>
				<div class="cardItem hide" style="background-color: gold;">
					每月30G流量 月租150元
				</div>
			</div>

		</div>
	</body>
</html>