今天我看了网易云课堂的js基础视频，跟着老师学了怎样做简单的选项卡（也就是内容切换），下面是我写的：
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#div1 ul{width: 300px;
height: 50px;}
#div1 li{list-style: none;
float:left;
width:100px;
height:50px;
text-align: center;
line-height: 50px;
cursor: pointer;}
.show{background: pink;}
#div1 div{width: 200px;
height:200px;
border:1px solid black;
display: none;}
</style>
<script>
window.onload=function(){
var odiv=document.getElementById('div1');
var list=odiv.getElementsByTagName('li');
var adiv=odiv.getElementsByTagName('div');
for(var i=0;i<adiv.length;i++){
list[i].index=i;
list[i].onmouseover=function(){
for(var j=0;j<adiv.length;j++){
list[j].className='';
adiv[j].style.display='none';
};
this.className='show';
adiv[this.index].style.display='block';
}
}
}
</script>
</head>
<body>
<div id="div1">
<ul>
<li class="show">技术部</li>
<li>网编部</li>
<li>设计部</li>
</ul>
<div style="display: block;">
<h3>技术部:</h3>
html js php<br />
前段后端和代码<br />
电脑键盘像开挂<br />
维护网站能力佳
</div>
<div>
<h3>网编部:</h3>
文案策划<br />
热点爆点一手抓<br />
文案功底全开挂<br />
能说会造脑洞大<br />
神来之笔侃人卦
</div>
<div>
<h3>设计部:</h3>
创意后期<br />
P图设计技术咖<br />
天马行空随你CUT<br />
构图审美有想法<br />
抗压耐操设在怕<br />
</div>
</div>
</body>
</html>
虽然和视频中给老师的不太一样，但是骨架是完全一样的，只是修改了一点样式。
