<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.main{
overflow: hidden;
zoom: 1;
border: 1px solid blue;
}
.menuLeft,.content{
float: left;
}
.menuLeft{
100px;
border: 1px solid black;
height: 200px;
}
.menuLeft ul li {
list-style-type: none;
height: 33.3%;
cursor: pointer;
}
.content{
400px;
border: 1px solid black;
height: 200px;
}
.content div:first-child{
display: block;
}
.content div{
display: none;
}
.active{
background-color: red;
color: white;
}
</style>
</head>
<body>
<div class="main">
<div class="menuLeft">
<ul>
<li class="active">缪成龙</li>
<li>朱计划</li>
<li>欧阳欣</li>
<li>张宁宁</li>
</ul>
</div>
<div class="content">
<div>
<p>甘肃省</p>
</div>
<div>
<p>安徽省</p>
</div>
<div>
<p>江西省</p>
</div>
<div>
<p>山东省</p>
</div>
</div>
</div>
<script type="text/javascript">
/*
* 侧栏选项卡
* 注意：在选择默认样式时，不要用伪类，否则不好改变
* ，在html样式中添加样式，或者在css中用style添加
*要用classList代替className
* classList有四种方法: 记住
* add(value)
* contains(value)
* remove(value)
* toggle(value)
*
*
*
*
*
* */
window.onload=function(){
var list=document.querySelectorAll("li");
var Odiv=document.querySelector(".content").querySelectorAll("div");
for(var i=0;i<list.length;i++){
(function (i) {
/*
* 闭包处理
* 这样没回返回的就是每个的i了
*
* */
list[i].onclick=function(){
list[i].classList.add("active");
Odiv[i].style.display="block";
for(var j=0;j<list.length;j++){
if(j!==i){
/*原生js这样处理兄弟元素
*/
Odiv[j].style.display="none";
list[j].classList.remove("active");
}
}
}
})(i)
}
}
</script>
</body>
</html>
效果如下图：