如何用JS获取多个P标签里的我选中的那个?并添加CSS样式？
<li ><a href="javascript:;" id="mine-qm" >启蒙</a>
<span id="qm-p">
<p>爱的世界</p>
<p>中文启蒙</p>
<p>美猴王汉语·幼儿</p>
</span>
</li>
这是我的下拉菜单的一个1级菜单和他的二级菜单。
我要的效果是选中的二级菜单“p”。能添加一个CSS样式。
繁星coding浏览 966回答 4
4回答
-
胡说叔叔
这个其实不难，主要是获取当前的标签，并添加样式，然后给其他的标签的样式设为无就可以了代码如下：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647<!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
jQuery:123$("li").on("click", "p", function () { $(this).addClass("checked").siblings().removeClass("checked");});详细的自己去扩展啦。 -
暮色呼如
123456789var 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"; }}
随时随地看视频慕课网APP
相关分类
JavaScript