                        課程
                    
                        /前端開(kāi)發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

為什么ul li.active里li和.active之間不能有空格？有了空格之后就沒(méi)有效果了（只看CSS的代碼就可以了）

<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實(shí)踐題 - 選項(xiàng)卡</title>
??? <style type="text/css">
???? /* CSS樣式制作 */
???? *{margin:0;padding:0;}
???? .show{
???????? display:block;
???????? }
???? .hide{
???????? display:none;
???? }
???? ul{
??????? ?
???? }
???? ul li{
???????? border:1px solid #B8BAB7;
???????? list-style:none;
???????? display:inline-block;
???????? width: 60px;
???????? line-height: 30px;
???????? text-align: center;
???????? border: 1px solid #999;
???????? border-bottom:none;
???????? margin-left:5px;
???? }
???? ul li:hover{
???? cursor:pointer;
???? }
???? ul li.active{
???? border-top:2px solid #8B4513;
???? border-bottom:2px solid #8B4513;
???? }
??? </style>
??? <script type="text/javascript">
??????? ?
??? // JS實(shí)現(xiàn)選項(xiàng)卡切換
??? window.onload=function(){
??? var ul=document.getElementById("ul");
??? var li=ul.getElementsByTagName("li");
??? var pdiv=document.getElementById("box");
??? var cdiv=pdiv.getElementsByTagName("div");
??? for(var i=0;i<li.length;i++)
??? {
??????? li[i].index=i;
??????? li[i].onmouseover=function(){
??????????? for(var k=0;k<li.length;k++)
??????????? {
??????????????? li[k].className="";
??????????? }
??????????? this.className="active";
??????????? for(var j=0;j<li.length;j++)
??????????? {
??????????????? cdiv[j].className="hide";
??????????? }
??????????? cdiv[this.index].className="show";
??????? }
??? }
}
??? </script>
?
</head>
<body>

<div id="box">
??? <ul id="ul">
??????? <li>房產(chǎn)</li>
??????? <li>家居</li>
??????? <li>二手房</li>
??? </ul>
??? <div>
??????? <p>275萬(wàn)購(gòu)昌平鄰鐵三居總價(jià)20萬(wàn)買一居</p>
??????? <p>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</p>
??????? <p>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</p>
??????? <p>京樓盤直降5000 中信府公園樓王現(xiàn)房</p>
??? </div>
??? <div>
??????? <p>40平出租屋大改造美少女的混搭小窩</p>
??????? <p>經(jīng)典清新簡(jiǎn)歐愛(ài)家 90平老房煥發(fā)新生</p>
??????? <p>新中式的酷色溫情 66平撞色活潑家居</p>
??????? <p>瓷磚就像選好老婆衛(wèi)生間煙道的設(shè)計(jì)</p>
??? </div>
??? <div>
??????? <p>通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</p>
??????? <p>西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</p>
??????? <p>黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</p>
??????? <p>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</p>
??? </div>
</div>

?
</body>
</html>