<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>练习2</title>
<style type="text/css">
li:nth-child(1){
float: left;
padding: 10px;
border:3px solid rgb(235, 114, 16);
margin-left:10px;
border-bottom-color: white;
list-style: none;
}
li:nth-child(2){
float: left;
padding: 10px;
border:3px solid rgb(16, 68, 212);
margin-left:10px;
border-bottom-color: rgb(12, 57, 206);
list-style: none;
}
li:nth-child(3){
float: left;
padding: 10px;
border:3px solid rgb(146, 141, 144);
margin-left:10px;
border-bottom-color: rgb(12, 57, 206);
list-style: none;
}
li:hover{
cursor:pointer;
}
#div1{
width:350px;
height:275px;
border:3px solid rgb(12, 57, 206);
position:absolute;
left:53px;
top:59.5px;
z-index:-1;
}
#div2{
width:350px;
height:275px;
border:3px solid rgb(12, 57, 206);
position:absolute;
left:53px;
display: none;
top:59.5px;
z-index:-1;
}
#div3{
width:350px;
height:275px;
border:3px solid rgb(12, 57, 206);
position:absolute;
display: none;
left:53px;
top:59.5px;
z-index:-1;
}
</style>
</head>
<body>
<ul>
<li title='liOne'>穗乃果</li>
<li title='liTwo'>海未</li>
<li title='liThree'>小鸟</li>
</ul>
<div id="div1">
声优：新田惠海<br>
年龄：16<br>
生日：8月3日<br>
血型：O型<br>
身高：157cm<br>
三围：78·58·82<br>
喜欢的食物：面包<br>
讨厌的食物：杏仁、青椒、有馅的食物<br>
16岁。高中二年级。μ's的发起人。无论何时都展露笑容总而言之打起精神是其长处。根据直觉和一时兴起展开行动，一旦决定了就埋头猛冲的一根筋。多多少少的困难也能凭着天生的超乐观精神一个个突破。μ's的发动机与牵引者。
</div>
<div id="div2">
声优：三森铃子<br>
年龄：16<br>
生日：3月15日<br>
血型：A型<br>
身高：159cm<br>
三围：76·58·80<br>
喜欢的食物：穗乃果家的豆沙包<br>
讨厌的食物：碳酸饮料<br>
16岁，高中二年级。出身于日本舞传统世家，散发着凛凛风度的大和抚子。
自幼修行弓道，礼节法度周到完备的女孩子。严于律己同时严于律人的典型。
十分厌恶对不良之事妥协姑息。穗乃果和小鸟的青梅竹马。
</div>
<div id="div3">
声优：内田彩<br>
年龄：16<br>
生日：9月12日<br>
血型：O型<br>
身高：159cm<br>
三围：80·58·80<br>
喜欢的食物：芝士蛋糕<br>
讨厌的食物：大蒜<br>
16岁。高中二年级。穗乃果的最好的朋友。从幼儿园时期开始就一直在一起的青梅竹马的亲密关系。与穗乃果相对照的性格文静温柔，学习上也十分优秀的优等生。虽然文静内向但是内心坚强，并不会胆小怕事。
</div>
<script type="text/javascript">
//给每个li赋个点击事件。
each(document.getElementsByTagName('li'),function(index,elem){
elem.onclick = function(){
operte[this.title]();
}
});
//遍历
function each(arry,fn){
for(var i = 0; i < arry.length; i++){
fn(i,arry[i]);
}
}
var operte = (function(){
var li = document.getElementsByTagName('li');
var opertion = {
liOne:function(){
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
li[0].style.borderBottomColor = 'white';
li[1].style.borderBottomColor = 'rgb(12, 57, 206)';
li[2].style.borderBottomColor = 'rgb(12, 57, 206)';
},
liTwo:function(){
document.getElementById('div2').style.display = 'block';
document.getElementById('div1').style.display = 'none';
document.getElementById('div3').style.display = 'none';
li[1].style.borderBottomColor = 'white';
li[2].style.borderBottomColor = 'rgb(12, 57, 206)';
li[0].style.borderBottomColor = 'rgb(12, 57, 206)';
},
liThree:function(){
document.getElementById('div3').style.display = 'block';
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
li[2].style.borderBottomColor = 'white';
li[1].style.borderBottomColor = 'rgb(12, 57, 206)';
li[0].style.borderBottomColor = 'rgb(12, 57, 206)';
}
}
return opertion;
})();
</script>
</body>
</html>
试试三个标题的<li>里挑随便一个加一个class,然后单独设置这个class的样式，在切换函数里把这个className赋给当前的标题