請(qǐng)哪位大佬幫我看下，為啥我的上邊框沒有變色，急死人了?。。。。。。?/h1>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>練習(xí)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">
聲優(yōu)：新田惠海<br>
年齡：16<br>
生日：8月3日<br>
血型：O型<br>
身高：157cm<br>
三圍：78·58·82<br>
喜歡的食物：面包<br>
討厭的食物：杏仁、青椒、有餡的食物<br>
16歲。高中二年級(jí)。μ's的發(fā)起人。無論何時(shí)都展露笑容總而言之打起精神是其長(zhǎng)處。根據(jù)直覺和一時(shí)興起展開行動(dòng)，一旦決定了就埋頭猛沖的一根筋。多多少少的困難也能憑著天生的超樂觀精神一個(gè)個(gè)突破。μ's的發(fā)動(dòng)機(jī)與牽引者。
</div>
<div id="div2">
聲優(yōu)：三森鈴子<br>
年齡：16<br>
生日：3月15日<br>
血型：A型<br>
身高：159cm<br>
三圍：76·58·80<br>
喜歡的食物：穗乃果家的豆沙包<br>
討厭的食物：碳酸飲料<br>
16歲，高中二年級(jí)。出身于日本舞傳統(tǒng)世家，散發(fā)著凜凜風(fēng)度的大和撫子。
自幼修行弓道，禮節(jié)法度周到完備的女孩子。嚴(yán)于律己同時(shí)嚴(yán)于律人的典型。
十分厭惡對(duì)不良之事妥協(xié)姑息。穗乃果和小鳥的青梅竹馬。
</div>
<div id="div3">
聲優(yōu)：內(nèi)田彩<br>
年齡：16<br>
生日：9月12日<br>
血型：O型<br>
身高：159cm<br>
三圍：80·58·80<br>
喜歡的食物：芝士蛋糕<br>
討厭的食物：大蒜<br>
16歲。高中二年級(jí)。穗乃果的最好的朋友。從幼兒園時(shí)期開始就一直在一起的青梅竹馬的親密關(guān)系。與穗乃果相對(duì)照的性格文靜溫柔，學(xué)習(xí)上也十分優(yōu)秀的優(yōu)等生。雖然文靜內(nèi)向但是內(nèi)心堅(jiān)強(qiáng)，并不會(huì)膽小怕事。
</div>
<script type="text/javascript">
//給每個(gè)li賦個(gè)點(diǎn)擊事件。
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>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>練習(xí)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">
聲優(yōu)：新田惠海<br>
年齡：16<br>
生日：8月3日<br>
血型：O型<br>
身高：157cm<br>
三圍：78·58·82<br>
喜歡的食物：面包<br>
討厭的食物：杏仁、青椒、有餡的食物<br>
16歲。高中二年級(jí)。μ's的發(fā)起人。無論何時(shí)都展露笑容總而言之打起精神是其長(zhǎng)處。根據(jù)直覺和一時(shí)興起展開行動(dòng)，一旦決定了就埋頭猛沖的一根筋。多多少少的困難也能憑著天生的超樂觀精神一個(gè)個(gè)突破。μ's的發(fā)動(dòng)機(jī)與牽引者。
</div>
<div id="div2">
聲優(yōu)：三森鈴子<br>
年齡：16<br>
生日：3月15日<br>
血型：A型<br>
身高：159cm<br>
三圍：76·58·80<br>
喜歡的食物：穗乃果家的豆沙包<br>
討厭的食物：碳酸飲料<br>
16歲，高中二年級(jí)。出身于日本舞傳統(tǒng)世家，散發(fā)著凜凜風(fēng)度的大和撫子。
自幼修行弓道，禮節(jié)法度周到完備的女孩子。嚴(yán)于律己同時(shí)嚴(yán)于律人的典型。
十分厭惡對(duì)不良之事妥協(xié)姑息。穗乃果和小鳥的青梅竹馬。
</div>
<div id="div3">
聲優(yōu)：內(nèi)田彩<br>
年齡：16<br>
生日：9月12日<br>
血型：O型<br>
身高：159cm<br>
三圍：80·58·80<br>
喜歡的食物：芝士蛋糕<br>
討厭的食物：大蒜<br>
16歲。高中二年級(jí)。穗乃果的最好的朋友。從幼兒園時(shí)期開始就一直在一起的青梅竹馬的親密關(guān)系。與穗乃果相對(duì)照的性格文靜溫柔，學(xué)習(xí)上也十分優(yōu)秀的優(yōu)等生。雖然文靜內(nèi)向但是內(nèi)心堅(jiān)強(qiáng)，并不會(huì)膽小怕事。
</div>
<script type="text/javascript">
//給每個(gè)li賦個(gè)點(diǎn)擊事件。
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
試試三個(gè)標(biāo)題的<li>里挑隨便一個(gè)加一個(gè)class,然后單獨(dú)設(shè)置這個(gè)class的樣式，在切換函數(shù)里把這個(gè)className賦給當(dāng)前的標(biāo)題