鼠标点击a标签，改变a标签的背景图片，js代码怎么写

鼠标点击a标签背景改变,再次点击a标签恢复原来的背景<divclass="redBallBox"><ulclass="clearfix"><li><ahref="#"hi... 鼠标点击a标签背景改变,再次点击a标签恢复原来的背景
<div class="redBallBox">
<ul class="clearfix">
<li>
<a href="#" hidefocus="true" rel="nofollow" class="js_ball" data-value="1">01</a>
8
</li>
<li>
<a href="javascript:;" hidefocus="true" rel="nofollow" class="js_ball" data-value="2">02</a>
0
</li>
<li>
<a href="javascript:;" hidefocus="true" rel="nofollow" class="js_ball" data-value="3">03</a>
1
</li>
<li>
<a href="javascript:;" hidefocus="true" rel="nofollow" class="js_ball" data-value="4">04</a>
7
</li>
<li>
<a href="javascript:;" hidefocus="true" rel="nofollow" class="js_ball" data-value="5">05</a>
4
</li>

</ul>
<div>

css

.redBallBox{width:430px;padding-right:34px;float:left}
.redBallBox li{width:33px;margin-right:6px;float:left;text-align:center;height:50px;line-height:14px}
.redBallBox li span{font-size:11px;color:#b6b6b6}
.redBallBox li span.maxomit{color:#ba2636}
.redBallBox li a,.redBallBox li a:visited{background:url(../images/newballs.png) 0 0 no-repeat;width:33px;height:33px;display:block;text-align:center;line-height:34px;font-size:16px;font-weight:bold;overflow:hidden;outline:0}
.redBallBox li a:hover{background-position:-35px 0;color:#333}
.redBallBox li a.active,.redBallBox li a.active:visited,.redBallBox li a.active:hover{background-position:-70px 0;color:#fff} 展开

 我来答

1个回答

#热议# 网上掀起『练心眼子』风潮，真的能提高情商吗？

创作者DKEIFHCB14128
推荐于2016-09-26 · TA获得超过211个赞

知道答主

回答量：38

采纳率：0%

帮助的人：61.1万

我也去答题访问个人页

关注

展开全部

因为没有你那个背景图片，所以用黑色背景代替，保存下面的html代码运行就能看到效果了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
</head>

<body>
<style>

.redBallBox{width:430px;padding-right:34px;float:left}
  .redBallBox li{width:33px;margin-right:6px;float:left;text-align:center;height:50px;line-height:14px}
  .redBallBox li span{font-size:11px;color:#b6b6b6}
  .redBallBox li span.maxomit{color:#ba2636}
  .redBallBox li a,.redBallBox li a:visited{background:url(../images/newballs.png) 0 0 no-repeat;width:33px;height:33px;display:block;text-align:center;line-height:34px;font-size:16px;font-weight:bold;overflow:hidden;outline:0}
  .redBallBox li a:hover{background-position:-35px 0;color:#333}
  .redBallBox li a.active,.redBallBox li a.active:visited,.redBallBox li a.active:hover{background-position:-70px 0;color:#fff;background: #000;}
  </style>
	<div class="redBallBox" id="redBallBox">
	<ul class="clearfix">
		<li>
			<a href="#" hidefocus="true" rel="nofollow" class="js_ball" data-value="1">01</a>
			<span>8</span>
		</li>
		<li>
			<a href="javascript:;" hidefocus="true" rel="nofollow" class="js_ball" data-value="2">02</a>
			<span>0</span>
		</li>
		<li>
			<a href="javascript:;" hidefocus="true" rel="nofollow" class="js_ball" data-value="3">03</a>
			<span>1</span>
		</li>
		<li>
			<a href="javascript:;" hidefocus="true" rel="nofollow" class="js_ball" data-value="4">04</a>
			<span>7</span>
		</li>
		<li>
			<a href="javascript:;" hidefocus="true" rel="nofollow" class="js_ball" data-value="5">05</a>
			<span>4</span>
		</li>

</ul>
<script>
	(function(){
		var li = document.getElementById('redBallBox').getElementsByTagName('a'),i;
		for ( i=0; i < li.length; i++) {
			li[i].onclick = function(){
				this.className = "active";
			}
		};
	})();
</script>
<div>
</body>
</html>

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

鼠标点击a标签，改变a标签的背景图片，js代码怎么写

其他类似问题

为你推荐：