                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /Tab選項卡切換效果

求解?是循環(huán)的問題嗎

是循環(huán)的問題嗎··

qq_慕斯卡4334448

2016-12-13

源自：Tab選項卡切換效果 1-5

關(guān)注問題我要回答

1126

操作

收起

1 回答

串豬神回答被采納 +3 積分
2016-12-13

不是。是你id的問題，注意到使用了一個for循環(huán)為每個p綁定了點擊事件，在for循環(huán)結(jié)束后，每個p標簽已經(jīng)綁定了事件了。但是注意到你的i在內(nèi)存中的值已經(jīng)是3了，所以你每次都沒有效果，可以在每個節(jié)點上綁定一些數(shù)據(jù)。幫你修改了一個?？梢詤⒄找幌拢瑴y試過了是可以的

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>層疊下拉菜單</title>
????<style?type="text/css">
?*{
????????????margin:0;padding:?0;font-size:?20px;list-style:?none;text-decoration:?none;color:?black;
?}
????????.menu{
????????????width:?210px;margin:50px?auto;border:?1px?solid?#ccc;
?}
????????.menu?p{height:?25px;line-height:?25px;font-weight:?bold;background:?:#eee;border-bottom:?1px?solid?#ccc;cursor:?pointer;padding-left:?5px;background:?#eee;}
????????ul{display:?none;}
????????.menu?li{height:?24px;line-height:?24px;padding-left:?5px;}
????</style>
????<script?type="text/javascript">
?window.onload=function(){
????????????var?p=document.getElementById('menu').getElementsByTagName('p');
?var?ul=document.getElementById("menu").getElementsByTagName("ul");
?for?(var?i?=?0;?i?<?p.length;?i++)?{
????????????????p[i].id?=?i;
?p[i].onclick=function(){
????????????????????for?(var?j?=?0;?j?<?ul.length;?j++)?{
????????????????????????if?(j==this.id)?{
????????????????????????????ul[j].style.display='block';
?}
????????????????????????else{
????????????????????????????ul[j].style.display?=?"none";
?}
????????????????????}
????????????????}
????????????}
????????}
????</script>
</head>
<body>
<div?class="menu"??id="menu">
????<div>
????????<p>Web前端</p>
????????<ul>
????????????<li><a?href="#">?JavaScript</a></li>
????????????<li>Div+Css</li>
????????????<li><a?href="#">jQuery</a></li>
????????</ul>
????</div>
????<div>
????????<p>后臺腳本</p>
????????<ul>
????????????<li><a?href="#">PHP</a></li>
????????????<li>ASP?.net</li>
????????????<li><a?href="#">JSP</a></li>
????????</ul>
????</div>
????<div>
????????<p>前端框架</p>
????????<ul>
????????????<li><a?href="#">Extjs</a></li>
????????????<li>Esspress</li>
????????????<li><a?href="#">YUI</a></li>
????????</ul>
????</div>
</div>
</body>
</html>

在每個節(jié)點上綁定了id，這樣就可以正確的得到了索引。

1 回復有任何疑惑可以回復我~

收起回答

#1

qq_慕斯卡4334448 提問者

大神測試確實可以通過但兩個循環(huán)為什么不能直接對等，還要用P[i].id ，在下小白理解有點吃力我該注意什么

2016-12-13 回復有任何疑惑可以回復我~

#2

串豬神回復 qq_慕斯卡4334448 提問者

因為注意到p[i]只是引用了數(shù)組里的某個變量而已，通過for循環(huán)后i值是已經(jīng)改變了，你通過onclick監(jiān)聽點擊事件是沒辦法直接讀取到這是第幾個i的，一般都會通過在節(jié)點上進行標記。其實就是i的值變化的問題，你可以在onclick里面console.log(i)；你看下就知道了，每次打印出來的都是3，因為for循環(huán)結(jié)束的時候監(jiān)聽事件設置完，i的值在內(nèi)存中變化成3了。所以其實就相當于你的每次點擊i都是3、

2016-12-13 回復有任何疑惑可以回復我~

#3

qq_慕斯卡4334448 提問者回復串豬神

明白，那在節(jié)點上只是進行標記的話 id 也是可以換成其他的嘍，一直讓我想到body中的標簽···

2016-12-13 回復有任何疑惑可以回復我~