TA貢獻1847條經(jīng)驗 獲得超11個贊
這個其實不難，主要是獲取當前的標簽，并添加樣式，然后給其他的標簽的樣式設為無就可以了代碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | <!doctype html> <html> <head> <title>js獲取二級菜單p元素</title>
<style> .ps{width:100px; height:45px; background:#fc0; color:#000;} </style> <script> window.onload=function(){ var spans=document.getElementById("qm-p");//獲取span標簽，這樣方便下一步獲 取二級菜單
var menuP=spans.getElementsByTagName("p");//通過getElementsByTagName標簽獲 取p標簽
for(i=0;i<menuP.length;i++){ //遍歷二級菜單 menuP[i].onclick=function(){
for(j=0;j<menuP.length;j++){ menuP[j].className=""; //給其他標簽樣式設為無 } this.className="ps";//給當前標簽添加樣式
}
}
} </script> </head> <body> <li ><a href="javascript:;" id="mine-qm" >啟蒙</a> <span id="qm-p"> <p>愛的世界</p> <p>中文啟蒙</p> <p>美猴王漢語·幼兒</p> </span> </li> </body> </html> |
TA貢獻1772條經(jīng)驗 獲得超8個贊
jQuery:
1 2 3 | $("li").on("click", "p", function () { $(this).addClass("checked").siblings().removeClass("checked"); }); |
詳細的自己去擴展啦。
TA貢獻1806條經(jīng)驗 獲得超5個贊
1 2 3 4 5 6 7 8 9 | var bs=document.getElementById("qm-d").getElementsByTagName("p"); for(var i=0;i<bs.length;i++){ bs[i].onclick=function(){ for(var j=0;j<bs.length;j++){ bs[j].style.backgroundColor="#fff"; } this.style.backgroundColor="#f00"; } } |
舉報