如何用JS获取多个P标签里的我选中的那个?并添加CSS样式？
<li><ahref="javascript:;"id="mine-qm">启蒙</a><spanid="qm-p"><p>爱的世界</p><p>中文启蒙</p><p>美...
<li ><a href="javascript:;" id="mine-qm" >启蒙</a>
<span id="qm-p">
<p>爱的世界</p>
<p>中文启蒙</p>
<p>美猴王汉语·幼儿</p>
</span>
</li>
这是我的下拉菜单的一个1级菜单和他的二级菜单。
我要的效果是选中的二级菜单“p”。能添加一个CSS样式。 展开
<span id="qm-p">
<p>爱的世界</p>
<p>中文启蒙</p>
<p>美猴王汉语·幼儿</p>
</span>
</li>
这是我的下拉菜单的一个1级菜单和他的二级菜单。
我要的效果是选中的二级菜单“p”。能添加一个CSS样式。 展开
5个回答
展开全部
这个其实不难，主要是获取当前的标签，并添加样式，然后给其他的标签的样式设为无就可以了代码如下：
<!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>
希望可以帮到你，还有什么疑问随时追问
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
</head>
<body>
<ul>
<li >
<a href="javascript:;" id="mine-qm" >
启蒙
</a>
<span id="qm-p">
<p>
爱的世界
</p>
<p>
中文启蒙
</p>
<p>
美猴王汉语·幼儿
</p>
</span>
</li>
</ul>
<script>
var dom;
var ps = document.getElementById("qm-p").getElementsByTagName("p");
for(var i = 0; i < ps.length; i++) {
ps[i].onclick = function () {
!!dom ? dom.style.color = "" : 0;
this.style.color = "red";
dom = this;
}
}
</script>
</body>
</html>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
</head>
<body>
<ul>
<li >
<a href="javascript:;" id="mine-qm" >
启蒙
</a>
<span id="qm-p">
<p>
爱的世界
</p>
<p>
中文启蒙
</p>
<p>
美猴王汉语·幼儿
</p>
</span>
</li>
</ul>
<script>
var dom;
var ps = document.getElementById("qm-p").getElementsByTagName("p");
for(var i = 0; i < ps.length; i++) {
ps[i].onclick = function () {
!!dom ? dom.style.color = "" : 0;
this.style.color = "red";
dom = this;
}
}
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
</head>
<body>
<ul>
<li >
<a href="javascript:;" id="mine-qm" >
启蒙
</a>
<span id="qm-p">
<p>
爱的世界
</p>
<p>
中文启蒙
</p>
<p>
美猴王汉语·幼儿
</p>
</span>
</li>
</ul>
<script>
var dom;
var ps = document.getElementById("qm-p").getElementsByTagName("p");
for(var i = 0; i < ps.length; i++) {
ps[i].onclick = function () {
!!dom ? dom.style.color = "" : 0;
this.style.color = "red";
dom = this;
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jQuery:
$("li").on("click", "p", function () {
$(this).addClass("checked").siblings().removeClass("checked");
});详细的自己去扩展啦。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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";
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
