大家?guī)臀铱纯次业拇a問題在哪里?是JS那部分的問題
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#bl{
margin: 0;
padding:0 ;
list-style-type: none;
}
#dh li{
float: left;
? ? ? ? ? ? ? ?width: 60px;
? ? ? ? ? ? ? ?border-color:peachpuff ;
? ? ? ? ? ? ? ?border-style: solid;
? ? ? ? ? ? ? ?text-align: center;
? ? ? ? ? ? ? ?background-color: #FFDAB9;
}
#bl li a{
display: block;
padding: 0.3em;
color: darkblue;
}
#bl li a:hover,#bl li a:focus
{
background-color: deepskyblue;
color:aliceblue ;
}
#clear{
clear:both ;
}
.content{
width: 260px;
? ?height: 270px;
? ?background-color:azure;
? ?margin-top: ;
? ?float: left;
? ? ? ?display:none;
? ?}
.content1{
display: none;
}
</style>
</head>
<body>
<div id="dh">
<ul id="bl">
<li ><a>房產(chǎn)</a></li>
<li><a>家居</a></li>
<li><a>二手房</a></li>
</ul>
</div>
<div id="clear"></div>
<div class="content">
<p>
275萬購昌平鄰鐵三居 總價20萬買一居
? ?200萬內(nèi)購五環(huán)三居 140萬安家東三環(huán)
? ?北京首現(xiàn)零首付樓盤 53萬購東5環(huán)50平
? ?京樓盤直降5000 中信府 公園樓王現(xiàn)房
</p>
</div>
?<div class="content">
<p>
40平出租屋大改造 美少女的混搭小窩
? ? 經(jīng)典清新簡歐愛家 90平老房煥發(fā)新生
? ? 新中式的酷色溫情 66平撞色活潑家居
? ? 瓷磚就像選好老婆 衛(wèi)生間煙道的設(shè)計(jì)
</p>
</div>
<div class="content">
<p>
通州豪華3居260萬 二環(huán)稀缺2居250w甩
? ? 西3環(huán)通透2居290萬 130萬2居限量搶購
? ? 黃城根小學(xué)學(xué)區(qū)僅260萬 121平70萬拋!
? ? 獨(dú)家別墅280萬 蘇州橋2居優(yōu)惠價248萬
</p>
</div>
</body>
<script type="text/javascript">
var aa=document.getElementsByTagName("a");
?for(var i=0;i<aa.length;i++){
?
?aa[i].onmouseover=function(){
? document.getElementsByClassName("content")[i].style.cssText="display: block;"; ?
?}
?
?aa[i].onmouseout=function(){
? document.getElementsByClassName("content1")[i].style.cssText="display: none;";
?}
?}
</script>
</html>
一直運(yùn)行不了，顯示"Uncaught?TypeError:?Cannot?read?property?'style'?of?undefined"
2016-08-04
?aa[i].onmouseover=function(){
? document.getElementsByClassName("content")[i].style.cssText="display: block;"; ?
?}
?
?aa[i].onmouseout=function(){
? document.getElementsByClassName("content1")[i].style.cssText="display: none;";
?}
請仔細(xì)看一下這兩句，你會發(fā)現(xiàn)按鈕所綁定的事件執(zhí)行的代碼是怎樣的，這個document.getElementsByClassName("content")[i].style.cssText="display: block;"; ? 所以每一次觸發(fā)事件時，就會把classname為"content"的節(jié)點(diǎn)數(shù)組里的i取出來對吧!!重點(diǎn)是這個i，i在執(zhí)行完for循環(huán)后就一直是3（js里for聲明的變量不僅在for里生效），所以會執(zhí)行document.getElementsByClassName("content")[3]，我們知道這個數(shù)組長為3，所以只有0-2，所以style自然是undefined。
修改代碼:
?for(var i=0;i<aa.length;i++){
? aa[i].value = i;
?aa[i].onmouseover=function(){
? document.getElementsByClassName("content")[this.value].style.cssText="display: block;"; ?
?}
?
?aa[i].onmouseout=function(){
? document.getElementsByClassName("content")[this.value].style.cssText="display: none;";
?}
我們把每一個節(jié)點(diǎn)的value設(shè)為對應(yīng)i，將執(zhí)行代碼i改為this.value，由于this.value并不會隨i變化而變化并且能代表對應(yīng)的節(jié)點(diǎn)所以能放心使用。(PS:注意把onmouseout里content1改回content)