1.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.red{background: red}
#list{list-style: none;}
#list li{position: relative; float: left; margin: 50px;}
div, .hide{display: none}
.show{display: block}
</style>
</head>
<body>
<script>
window.onload = function(){
var oUl = document.getElementById('list');
var arrLi = oUl.getElementsByTagName('li');
for(var i = 0; i < arrLi.length; i++){
fnTab(arrLi[i], arrLi);
}
function fnTab(oLi, aLi){
var oA = oLi.getElementsByTagName('a')[0];
var oDiv = oLi.getElementsByTagName('div')[0];
oA.onclick = function () {
for(var i = 0; i < aLi.length; i++){
aLi[i].getElementsByTagName('a')[0].className = '';
aLi[i].getElementsByTagName('div')[0].className = 'hide';
}
oA.className = 'red';
oDiv.className = 'show';
}
}
}
</script>
<ul id="list">
<li>
<a href="javascript:;">简介</a>
<div>简介.........</div>
</li>
<li>
<a href="javascript:;">会议</a>
<div>会议.........</div>
</li>
<li>
<a href="javascript:;">回看</a>
<div>回看.........</div>
</li>
</ul>
</body>
</html>