跪求大能！如何用JS实现鼠标点击a标签后li的背景变化
<styletype="text/css">body{font:36pxArial,Verdana,Tahoma,"宋体";}*{padding:0px;margin:0...
<style type="text/css">
body{font:36px Arial,Verdana,Tahoma,"宋体";}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20537A;}
.listbox{width:400px; margin:100px;}
.e2{}
.e2 li:hover{background:#FF9;}
</style>
</head>
<body> <div class="listbox">
<ul class="e2">
<li><a href="#" target="_blank" >1</a></li>
<li><a href="#" target="_blank" >2</a></li>
<li><a href="#" target="_blank" >3</a></li>
<li><a href="#" target="_blank" >4</a></li>
</ul>
</div>
</body>
如何实现点击A（1）标签后，在关闭新窗口打开的连接（1#）后，背景就出现在A（1）标签上了。用JS实现，不要用CSS实现（因为是做模板不可能一步一步的加样式）
实在没多少分奖励了，不好意思 展开
body{font:36px Arial,Verdana,Tahoma,"宋体";}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20537A;}
.listbox{width:400px; margin:100px;}
.e2{}
.e2 li:hover{background:#FF9;}
</style>
</head>
<body> <div class="listbox">
<ul class="e2">
<li><a href="#" target="_blank" >1</a></li>
<li><a href="#" target="_blank" >2</a></li>
<li><a href="#" target="_blank" >3</a></li>
<li><a href="#" target="_blank" >4</a></li>
</ul>
</div>
</body>
如何实现点击A（1）标签后，在关闭新窗口打开的连接（1#）后，背景就出现在A（1）标签上了。用JS实现，不要用CSS实现（因为是做模板不可能一步一步的加样式）
实在没多少分奖励了，不好意思 展开
1个回答
展开全部
<!DOCTYPE HTML>
<html>
<head>
<meta charset=UTF-8>
<title>学了又学</title>
<style type="text/css">
body {
font: 36px Arial, Verdana, Tahoma, "宋体";
}
* {
padding: 0px;
margin: 0px;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #20537A;
}
.listbox {
width: 400px;
margin: 100px;
}
.e2 li:hover {
background: #FF9;
}
</style>
<script type="text/javascript">
onload = function ()
{
var as = document.querySelectorAll ("a");
var funny = function (i)
{
as[i].onclick = function ()
{
if (!!as.a)
{
as.a.style.backgroundColor = "";
}
var p = this.parentElement;
p.style.backgroundColor = "#FF9";
as.a = p;
}
}
for ( var i = 0; i < as.length; i++)
{
funny (i);
}
}
</script>
</head>
<body>
<div class="listbox">
<ul class="e2">
<li><a href="#" target="_blank">1</a>
</li>
<li><a href="#" target="_blank">2</a>
</li>
<li><a href="#" target="_blank">3</a>
</li>
<li><a href="#" target="_blank">4</a>
</li>
</ul>
</div>
</body>
</html>
追问
能把
.e2 li:hover {
background: #FF9;
}
这个也加入JS吗
追答
<script type="text/javascript">
onload = function ()
{
var lis = document.querySelectorAll ("li");
var funny = function (i)
{
var li = lis[i], a = li.children[0];
li.onmouseover = function ()
{
if (lis.a !== this)
{
this.style.backgroundColor = "#FE9";
}
};
li.onmouseout = function ()
{
if (lis.a !== this)
{
this.style.backgroundColor = "";
}
};
a.onclick = function ()
{
if (!!lis.a)
{
lis.a.style.backgroundColor = "";
}
li.style.backgroundColor = "#FF9";
lis.a = li;
}
}
for ( var i = 0; i < lis.length; i++)
{
funny (i);
}
}
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
