用js写选项卡

最新推荐文章于 2022-02-11 09:42:55 发布

原创最新推荐文章于 2022-02-11 09:42:55 发布 · 267 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选项卡</title>
	<style type="text/css">
	*{

		margin: 0px;
		padding: 0px;
		/*清除无序列表黑点*/
		list-style: none;
	}
	.containter{
		width: 300px;
		height: 300px;
		border: 1px solid #999;
		/*多余部分隐藏*/
		overflow: hidden;


	}
	.items{
		width: 300px;
		/*弹性盒子*/
		display: flex;
		float: left;
	    font-size: 15px;
	}
	.item{
		/*均等划分每一个盒子*/
		flex: 1;
		float: left;
		font-size: 15px;
		text-align: center;
	}
	.box{
		text-align: center;
		/*行高*/
		line-height: 280px;
	}

	</style>
</head>
<body>
	<div class="containter">
		<ul class="items">

			<li class="item">第一项</li>
			<li class="item">第二项</li>
			<li class="item">第三项</li>
			<li class="item">第四项</li>
			<li class="item">第五项</li>
		</ul>
	<div class="box">第一项</div>
	<div class="box">第二项</div>
	<div class="box">第三项</div>

	<div class="box">第四项</div>
	<div class="box">第五项</div>
	</div>
</body>
  <script type="text/javascript">
  // 获取每个Li的一个数组元素
  var item= document.getElementsByClassName("items")[0].getElementsByTagName("li")
  // 获得ｄｉｖ的一个数组元素
  var box=  document.getElementsByClassName("box");
      for (var i = 0;i<item.length; i++) {
      	// 使用ｔｈｉｓ获得当前元素
      	item[i].index=i;
      	// 每个ｌｉ的点击事件
      	item[i].onclick = function(){
      		for (var j = 0;j<box.length ;j++) {0 
      			// 点击之后实现ｄｉｖ内容的隐藏
      			box[j].style.display="none";
      			// 点击之后实现每个Li的背景颜色的改变
      			item[j].style.background="#fff";

      			
      		}
      		// 实现当前对象的背景颜色的改变
      		this.style.background="pink";
      		// 实现ｄｉｖ内容的显示
      		box[this.index].style.display="block";

      	}
      
      };


  </script>

</html>