<li ><a href="javascript:;" id="mine-qm" >启蒙</a><span id="qm-p"><p>爱的世界</p><p>中文启蒙</p><p>美猴王汉语·幼儿</p></span></li>这是我的下拉菜单的一个1级菜单和他的二级菜单。我要的效果是选中的二级菜单“p”。能添加一个CSS样式。
4 回答
胡说叔叔
TA贡献1804条经验 获得超8个赞
这个其实不难，主要是获取当前的标签，并添加样式，然后给其他的标签的样式设为无就可以了代码如下：
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> |
largeQ
TA贡献2039条经验 获得超7个赞
jQuery:
1 2 3 | $("li").on("click", "p", function () { $(this).addClass("checked").siblings().removeClass("checked"); }); |
详细的自己去扩展啦。
暮色呼如
TA贡献1853条经验 获得超9个赞
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"; } } |
添加回答
举报
0/150
提交
取消