請哪位大佬幫我看下，為啥我的上邊框沒有變色，急死人了?。。。。。?！
<!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>
2018-11-17
試試三個標題的<li>里挑隨便一個加一個class,然后單獨設置這個class的樣式，在切換函數里把這個className賦給當前的標題