Question

DIV+CSS的问题，将图片作为链接，如何实现点击之后点击处变成另一张图片

#menu{
vertical-align:bottom;
width:732px;
height:51px;
padding-left:243px;
padding-top:0px;
font-size:15px;
background-image:url(../images/logo_bg.jpg);
background-repeat:no-repeat;
float:left;
}
#menu ul
{
border-style: none;
border-color: inherit;
border-width: 0;
margin: 0px auto;
width:720px;
height:31px;
list-style-type:none;
padding:0px;
float:left;
}
.m_line{
margin:0px;
padding:0px;
float:left;
width:2px;
height:31px;
}
.m_li a{
float:left;
width:109px;
line-height:31px;
background-image:url(../images/loge_top01.jpg);
text-align:center;
margin-right:0px;
margin-left:0px;
margin:0;
padding:0;
font-weight:bold;
}
.m_li a:hover{
background-image: url(../images/logo_top1.jpg);

}

.m_li_a { float:left;
width:109px;
line-height:31px;
text-align:center;
padding-top:0px;
font-weight:bold;
background-image:url(../images/logo_top1.jpg);
height:31px;
margin-top:0px;
margin-right:0px;
margin-left:0px;
}
.m_li_a a{
display:block;
color:#FFFFFF;
width:109;
}
<div id="menu">
<ul style="padding-top:20px;">
<li id="m_1" class="m_li_a"><a href="index.aspx">首 页</a></li>
<li class="m_line"></li>
<li id="m_2" class="m_li"><a href="ymgk_cy.aspx">
影美概况</a></li>
<li class="m_line"></li>
<li id="m_3" class="m_li"><a href="Prolist.aspx">
加盟支持</a></li>
<li class="m_line"></li>
<li id="m_4" class="m_li">
<a href="Newslist.aspx?TypeID=1">最新动态</a></li>
<li class="m_line"></li>
<li id="m_5" class="m_li">
<a href="update.html">用户专区</a></li>
<li class="m_line"></li>
<li id="m_6" class="m_li"><a href="#">
关于我们</a></li>
</ul>
</div>
这一段代码不知道什么问题，无法实现点击之后图片变成另外一张图片，仍然是原来的那张图片，求高手指点一下。

Answer 1

你现在的效果应该是鼠标移上去之后会变成另外一张图片。
使用的是CSS的伪类，
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
提示：伪类名称对大小写不敏感。

追问

能说的具体点吗，这个怎么用

追答

你这个效果，单纯用CSS控制不成。
鼠标经过，可以用a:hover这个伪类
鼠标点击不松开，可以用a:active
被点击过的链接倒是有点像你说的那种，点击可以加个背景，用的是a:visited
但是这个伪类的效果是，在COOKIE不清除的情况下，页面中，所有被点击过的链接都显示a:visited中的样式。你这个明显是一个导航，要是一个背景切换的效果，应该用JS动画做
JQuery也很好实现
第一步：CSS里面加一个类 current { background:url(你图片的路径) no-repeat 0 0 !important;} //定义current样式，是你要切换的背景图片
第二步：给你的ul 加上id=menu
$("#menu li").click(function(){
$(".current").removeClass("current");
$("this").addClass("current");
});
//点击LI后，先把有current这个类的LI的current类去掉，就是让它不再有那个背景图片，然后为你当前点击的这个LI加上current这个类，这个他就有了current的样式了，就有了你要有背景

追问

下面是对应的JS代码，css类可以修改，你看下这个JS有什么问题，我想应该是js的问题，div里面可以修改。我本来是不想用js的，css实现不了，只能用js了

追答

你直接用上面那个方法。
第一步：CSS里面加一个类 current { background:url(你图片的路径) no-repeat 0 0 !important;} //定义current样式，是你要切换的背景图片
第二步：JS里的代码：
$("#menu li").click(function(){
$(".current").removeClass("current");
$("this").addClass("current");
});

追问

你好，能加个好友吗，我qq号809925668，想好好向您请教一下，加我的时候写一下验证信息，谢谢。好多不懂的想找个高手指点一下

Answer 2

.m_li_a:visited 试试 不行就用js

追问

这个也加入试过，不行，整个网站都已经做好了，就这一点毛病，现在也不知道从哪下手了