切換程序那里有什么問題嗎,為什么切換不了(為什么這樣改就可以了)
??? <script type="text/javascript">
??? var ul=document.getElementsByTagName("ul")[0];
??? var li=ul.getElementsByTagName("li");
??? var divv=document.getElementsByTagName("div")[0];
??? var div=divv.getElementsByTagName("div");
??? for(var i=0;i<li.length;i++){
??????? li[i].onmouseover=function(){
??????????? for(var j=0;j<div.length;j++){
??????????????? div[j].className="hide"
??????????? }?????????? ?
??????????? div[i].className="show";
??????? }
??? } ?
??? </script>
--------------------------------改成下面的就可以-----------------------------------
window.onload=function(){
??? var ul=document.getElementById("ul1");? ?
??? var li=ul.getElementsByTagName("li");
??? var divv=document.getElementById("body");
??? var div=divv.getElementsByTagName("div");
?
??? for(var i=0;i<li.length;i++){
??????? li[i].index=i;
??????? li[i].onmouseover=function(){
??????????? for(var j=0;j<div.length;j++){
??????????????? div[j].className="hide"
??????????? }?????????? ?
??????????? div[this.index].className="show";
??????? }
??? }? ?
}
2016-12-02
<!DOCTYPE html>
<html>
<head>
??? <meta charset="UTF-8">
??? <title>實(shí)踐題 - 選項(xiàng)卡</title>
??? <style type="text/css">
???? /* CSS樣式制作 */ ?
???? *{
???????? margin:0;
???????? padding:0;
???????? font:normal 12px "微軟雅黑";
???????? color:#000000;
???? }
???? .hide{display:none;}
???? .show{display:block;}
???? ul{list-style-type:none}
???? #ul1{
???????? border-bottom: 2px solid #8B4513;
???????? height: 32px;
???? }
???? #ul1 li{
???????? display: inline-block;
???????? width: 60px;
???????? line-height:32px;
???????? text-align: center;
???????? border: 1px solid #999;
???????? border-bottom: none;
???????? margin-left: 5px;
???? }
???? #body{
???????? width:275px;
???????? margin:20px auto;
???? }
???? #body div{
???????? border:1px solid #7396B8;
???????? border-top:none;
???? }
???? #body div li{
???????? height:30px;
???????? line-height:30px;
???????? text-indent:8px;
???? }
????? ?
??? </style>
??? <script type="text/javascript">
??? // JS實(shí)現(xiàn)選項(xiàng)卡切換
??? var ul=document.getElementsByTagName("ul")[0];
??? var li=ul.getElementsByTagName("li");
??? var divv=document.getElementsByTagName("div")[0];
??? var div=divv.getElementsByTagName("div");
??? for(var i=0;i<li.length;i++){
??????? li[i].onmouseover=function(){
??????????? for(var j=0;j<div.length;j++){
??????????????? div[j].className="hide"
??????????? }?????????? ?
??????????? div[i].className="show";
??????? }
??? } ?
??? </script>
?
</head>
<body>
<!-- HTML頁(yè)面布局 -->
<div id="body">
??? <ul id="ul1">
???? <li>房產(chǎn)</li>
???? <li>家具</li>
???? <li>二手房</li>
??? </ul>
??? <div>
??????? <ul>
???????? <li>275萬(wàn)購(gòu)昌平鄰鐵三居 總價(jià)20萬(wàn)買一居</li>
???????? <li>200萬(wàn)內(nèi)購(gòu)五環(huán)三居 140萬(wàn)安家東三環(huán)</li>
???????? <li>北京首現(xiàn)零首付樓盤 53萬(wàn)購(gòu)東5環(huán)50平</li>
???????? <li>京樓盤直降5000 中信府 公園樓王現(xiàn)房</li>
??????? </ul>
??? </div>
??? <div>
??????? <ul>
???????? <li>40平出租屋大改造 美少女的混搭小窩</li>
???????? <li>經(jīng)典清新簡(jiǎn)歐愛家 90平老房煥發(fā)新生</li>
???????? <li>新中式的酷色溫情 66平撞色活潑家居</li>
???????? <li>瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)</li>
??????? </ul>
??? </div>
??? <div>
??????? <ul>
???????? <li>通州豪華3居260萬(wàn) 二環(huán)稀缺2居250w甩</li>
???????? <li>西3環(huán)通透2居290萬(wàn) 130萬(wàn)2居限量搶購(gòu)</li>
???????? <li>黃城根小學(xué)學(xué)區(qū)僅260萬(wàn) 121平70萬(wàn)拋!</li>
???????? <li>獨(dú)家別墅280萬(wàn) 蘇州橋2居優(yōu)惠價(jià)248萬(wàn)</li>
??????? </ul>
??? </div>
</div>
</body>
</html>