javascrTab切换

最新推荐文章于 2024-08-29 14:41:03 发布

北风吹画州

最新推荐文章于 2024-08-29 14:41:03 发布

阅读量87

点赞数 1

文章标签： JavaScript DOM操作事件监听 Tab切换前端开发

本文链接：https://blog.csdn.net/m0_59359854/article/details/125487552

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
			}
			  .nav a{
				   display: block;
				   width: 160px;
				   height: 35px;
				   line-height: 35px;
				   text-align: center;
				   background: #DCDCDC;
				   color: #666;
				   float: left;
				   margin-right: 10px;
			  }
			  .nav a.hover{
				  background: blue;
				  color: #fff;
			  }
			  
			  .nav_con div{
			  		 display: none;
					 clear: both;
			  }
			  .nav_con div:nth-child(1){
			  		  display: block;
			  }
		</style>
	</head>
	<body>
		<!-- tab切换复用 -->
		<div class="tab">
			<div class="nav">
				<a href="javascript:;" class="hover">公司新闻00</a>
				<a href="javascript:;">公司动态10</a>
				<a href="javascript:;">行业新闻20</a> 
			</div>
			<div class="nav_con">
				<div>1-1</div> 
				<div>1-2</div>
				<div>1-3</div>
			</div>
		</div>
		<div class="tab">
			<div class="nav">
				<a href="javascript:;" class="hover">公司新闻11</a>
				<a href="javascript:;">公司动态22</a>
				<a href="javascript:;">行业新闻33</a> 
			</div>
			<div class="nav_con">
				<div>2-1</div> 
				<div>2-2</div>
				<div>2-3</div>
			</div>
		</div>
		
		
		<script type="text/javascript">
			//事件的委派  这里我们不需要给每个a标签加事件  只需要给.nav标签加事件 通过.nav去找里面的子元素标签 ->事件的委派
			var navNode = document.querySelectorAll('.nav');
			// 我们需要给每个.nav标签加监听事件 需要用for循环
			for (var i = 0; i < navNode.length; i++) {
				navNode[i].addEventListener('click',function(e){
					// console.log(e.target);找到当前被点击的a标签
					//给a标签加hover属性之前 先去除hover属性
					// 我们需要获取到所有的a标签 可以通过当前的a标签获取父级标签.nav 再通过父级标签 找到里面所有的子标签a标签
					// console.log(e.target.parentNode);获得父级
					// console.log(e.target.parentNode.children);获得所有的a标签
					var navsa = e.target.parentNode.children;
					for (var j = 0; j < navsa.length; j++) {
						navsa[j].className = '';
						//给每个a标签添加index属性
						navsa[j].setAttribute('index',j);
					}
					
					
					//通过当前的a标签获得父级.nav标签 通过.nav标签 获得下一个兄弟级标签 .nav_con 再通过.nav_con标签 获得里面的子标签 三个div标签
					// console.log(e.target.parentNode.nextElementSibling.children);
					var nav_con_div = e.target.parentNode.nextElementSibling.children;				
					for (var j = 0; j < nav_con_div.length; j++) {
						nav_con_div[j].style.display = 'none';
					}
					// 获取对应的索引值
					var thisIndex = e.target.getAttribute('index');
					// console.log(thisIndex);
					e.target.className = 'hover';
					nav_con_div[thisIndex].style.display = 'block';
					
				})
			}
		</script>
	</body>
</html>