<!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>