<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>选项卡</title>
<style type="text/css">
ul li{
list-style-type: none;
float: left;
padding-left: 60px;
}
.yin{
display: none;
}
.xian{
color: red;
}
</style>
</head>
<body>
<div id="box">
<div id="one1">11</div>
<div id="one2" class="yin">22</div>
<div id="one3" class="yin">33</div>
<ul>
<li id="one_1" class="xian" onclick="xuanxiang('one',1,3)">1</li>
<li id="one_2" onclick="xuanxiang('one',2,3)">2</li>
<li id="one_3" onclick="xuanxiang('one',3,3)">3</li>
</ul>
</div>
<script type="text/javascript">
function xuanxiang(name,dangqian,zong){
for(var i=1;i<=zong;i++){
var li=document.getElementById(name+'_'+i);
var div=document.getElementById(name+i);
li.className=i==dangqian?"xian":"";
div.style.display=i==dangqian?"block":"none";
}
}
</script>
</body>
</html>