<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.hide{display:none;}
li{list-style: none;display:inline-block;background-color:#eee;}
.active{background-color:red;color:#fff;}
.aTapwraps{border:1px solid red;}
.aTapwraps div{border:1px solid pink;}
</style>
</head>
<body>
<div class="tapWrap">
<ul class="headWrap" id="tapWrap">
<li class="active">要闻</li>
<li>公安部要闻</li>
</ul>
<div class="aTapwraps" id="tapWraps">
<div>
<p>文字1</p>
<p>文字1</p>
<p>文字1</p>
</div>
<div class='hide'>
<p>文字2</p>
<p>文字2</p>
<p>文字2</p>
</div>
</div>
<ul class="headWrap" id="tapWrap1">
<li class="active">要闻</li>
<li>公安部要闻</li>
</ul>
<div class="aTapwraps" id="tapWraps1">
<div>
<p>文字1</p>
<p>文字1</p>
<p>文字1</p>
</div>
<div class='hide'>
<p>文字2</p>
<p>文字2</p>
<p>文字2</p>
</div>
</div>
</div>
<script>
window.onload = function(){
function stopPropagation(e){
var e = e || window.event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
}
function For(headWrapLi,tapWrapLi){
for(var i = 0;i<headWrapLi.length;i++){
headWrapLi[i].index = i;
headWrapLi[i].onclick = function(e){
stopPropagation(e);
for(var j = 0;j<tapWrapLi.length;j++){
headWrapLi[j].className = '';
tapWrapLi[j].className = 'hide';
}
this.className = 'active';
tapWrapLi[this.index].className = '';
}
}
}
function tab(head,content){
var headLi = document.getElementById(head).getElementsByTagName('li');
var contentDiv = document.getElementById(content).getElementsByTagName('div');
For(headLi,contentDiv)
};
tab('tapWrap','tapWraps')
tab('tapWrap1','tapWraps1')
}
</script>
</body>
</html>