各位朋友,目前只做出来了点击一次图片,图片变色,点击第二次的时候,上一张图片不变灰。
我觉得有可能需要获取上一次鼠标点击事件,但是只是一个思路,我也不知道自己想的对不对。
大家如果有办法解决,麻烦大家解答一下,谢谢大家
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>pro.html</title>
<style type="text/css">
.one {
background-color: white;
}
.two {
background-color: black;
}
.three {
background-color: orange;
}
</style>
<!-- <script type="text/javascript" src="../jquery-1.8.0.min.js"></script> -->
<script type="text/javascript">
window.onload = function ()
{
var ul = document.getElementsByTagName ('ul')[0];
var imgs = ul.getElementsByTagName ('img');
for ( var i = 0; i < imgs.length; i++)
{
imgs[i].parentElement.className = 'one';
imgs[i].onclick = function ()
{
for ( var i = 0; i < imgs.length; i++)
{
imgs[i].parentElement.className = 'one';
}
this.parentElement.className = 'two';
};
}
}
</script>
</head>
<body>
<ul>
<li><a href="#" tittle="icon/one1_03.png"><b><img
src="icon/one_03.png" /> </b> </a></li>
<li><a href="#" tittle="icon/two2_03.png"><img
src="icon/two_03.png" /> </a></li>
<li><a href="javascript:goMenu('menu_business.html')"
tittle="icon/three3_03.png"><img src="icon/three_03.png" /> </a></li>
<li><a href="#" tittle="icon/four4_03.png"><img
src="icon/four_03.png" /> </a></li>
<li><a href="#" tittle="icon/five5_03.png"><img
src="icon/five_03.png" /> </a></li>
<li><a href="#" tittle="icon/six6_03.png"><img
src="icon/six_03.png" /> </a></li>
<li><a href="#" tittle="icon/seven7_03.png"><img
src="icon/seven_03.png" /> </a></li>
<div class="clear"></div>
</ul>
</body>
</html>