css鼠标点击项背景图片更改？？？
请教高手如何实现：css鼠标点击项背景图片更改？？？点哪个选，哪个项的图片背景就是左边白色图片背景。我知道是需要一段JS控制代码，请问JS代码怎么写？我其余代码写出来了，...
请教高手如何实现：css鼠标点击项背景图片更改？？？点哪个选，哪个项的图片背景就是左边白色图片背景。我知道是需要一段JS控制代码，请问JS代码怎么写？
我其余代码写出来了，如下：
<style type="text/css">
<!--
#nav {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(menu_bg.gif); HEIGHT: 39px; PADDING-TOP: 0px
}
#nav UL {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#nav UL LI {
TEXT-ALIGN: center; WIDTH: 106px; FLOAT: left; HEIGHT: 25px; FONT-WEIGHT: bold; PADDING-TOP: 14px
}
#nav UL LI.cum {
TEXT-ALIGN: center; WIDTH: 106px; BACKGROUND: url(menu_over_bg.gif) no-repeat 50% 0px; FLOAT: left; HEIGHT: 25px; COLOR: #3c0067; FONT-WEIGHT: bold; PADDING-TOP: 14px
}
#nav UL LI.cum A:link {
COLOR: #cd0000; TEXT-DECORATION: none
}
#nav UL LI.cum A:visited {
COLOR: #cd0000; TEXT-DECORATION: none
}
#nav UL LI.cum A:hover {
COLOR: #333333; TEXT-DECORATION: none
}
-->
</style>
</head>
<body>
<DIV id=nav class=main_w>
<UL>
<LI onclick="this.className='click';"><A href="index.html">代理加盟</A> </LI>
<LI><A href="index2.html">会员中心</A> </LI>
</UL>
</DIV> 展开
我其余代码写出来了，如下：
<style type="text/css">
<!--
#nav {
PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(menu_bg.gif); HEIGHT: 39px; PADDING-TOP: 0px
}
#nav UL {
PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; PADDING-TOP: 0px
}
#nav UL LI {
TEXT-ALIGN: center; WIDTH: 106px; FLOAT: left; HEIGHT: 25px; FONT-WEIGHT: bold; PADDING-TOP: 14px
}
#nav UL LI.cum {
TEXT-ALIGN: center; WIDTH: 106px; BACKGROUND: url(menu_over_bg.gif) no-repeat 50% 0px; FLOAT: left; HEIGHT: 25px; COLOR: #3c0067; FONT-WEIGHT: bold; PADDING-TOP: 14px
}
#nav UL LI.cum A:link {
COLOR: #cd0000; TEXT-DECORATION: none
}
#nav UL LI.cum A:visited {
COLOR: #cd0000; TEXT-DECORATION: none
}
#nav UL LI.cum A:hover {
COLOR: #333333; TEXT-DECORATION: none
}
-->
</style>
</head>
<body>
<DIV id=nav class=main_w>
<UL>
<LI onclick="this.className='click';"><A href="index.html">代理加盟</A> </LI>
<LI><A href="index2.html">会员中心</A> </LI>
</UL>
</DIV> 展开
4个回答
展开全部
<script language="javascript">
function ss(id){
return document.getElementById(id);
}
function menu_my(name,num) {
var my;
my = ss(name);
if ( my.last == undefined ) {
my.last = 1;
}
var Menu = ss("menu" + name + my.last);
var Cont = ss("cont" + name + my.last);
Menu.className = "";
Cont.style.display = "none";
var Menu = ss("menu" + name + num);
var Cont = ss("cont" + name + num);
Menu.className = "s_current";
Cont.style.display = "block";
my.last =num ;
}
</script>
<div id="s_topnav">
<ul id="a">
<li class="s_current" id="menua1" onclick="menu_my('a',1)">最新上传</li>
<li id="menua2" onclick="menu_my('a',2)">最多点击</li>
<li id="menua3" onclick="menu_my('a',3)">专家推荐</li>
</ul>
</div>
<div class="s_content" id="conta1">111111<div>
<div class="s_content" id="conta2" style="display:none;">111111<div>
上边是JS下边展示形式。自己摘吧。
function ss(id){
return document.getElementById(id);
}
function menu_my(name,num) {
var my;
my = ss(name);
if ( my.last == undefined ) {
my.last = 1;
}
var Menu = ss("menu" + name + my.last);
var Cont = ss("cont" + name + my.last);
Menu.className = "";
Cont.style.display = "none";
var Menu = ss("menu" + name + num);
var Cont = ss("cont" + name + num);
Menu.className = "s_current";
Cont.style.display = "block";
my.last =num ;
}
</script>
<div id="s_topnav">
<ul id="a">
<li class="s_current" id="menua1" onclick="menu_my('a',1)">最新上传</li>
<li id="menua2" onclick="menu_my('a',2)">最多点击</li>
<li id="menua3" onclick="menu_my('a',3)">专家推荐</li>
</ul>
</div>
<div class="s_content" id="conta1">111111<div>
<div class="s_content" id="conta2" style="display:none;">111111<div>
上边是JS下边展示形式。自己摘吧。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#nav {
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
HEIGHT: 39px;
PADDING-TOP: 0px;
background-color:#C00;
}
#nav UL {
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
}
#nav UL LI {
TEXT-ALIGN: center;
WIDTH: 106px;
FLOAT: left;
HEIGHT: 25px;
FONT-WEIGHT: bold;
PADDING-TOP: 14px
}
#nav UL LI.cum {
TEXT-ALIGN: center;
WIDTH: 106px;
background-color:#FFF;
border:1px solid #900;
FLOAT: left;
HEIGHT: 25px;
COLOR: #3c0067;
FONT-WEIGHT: bold;
PADDING-TOP: 14px
}
#nav UL LI.cum A:link {
COLOR: #cd0000;
TEXT-DECORATION: none
}
#nav UL LI.cum A:visited {
COLOR: #cd0000;
TEXT-DECORATION: none
}
#nav UL LI.cum A:hover {
COLOR: #333333;
TEXT-DECORATION: none
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function changeMc(x,y){
// x是当前显示的层 y是即将显示的层
document.getElementById(x).style.display = "none"
document.getElementById(y).style.display = "block"
}
-->
</script>
</head>
<body>
<DIV id=nav class=main_w>
<UL id="dataBox1" style="display:block;">
<LI onclick="javascript:changeMc('dataBox1','dataBox2')" ><A href="#" >代理加盟</A> </LI>
<LI onclick="javascript:changeMc('dataBox2','dataBox1')" class="cum"><A href="#" >会员中心</A> </LI>
</UL>
<UL id="dataBox2" style="display:none;" >
<LI onclick="javascript:changeMc('dataBox1','dataBox2')" class="cum"><A href="#" >代理加盟</A> </LI>
<LI onclick="javascript:changeMc('dataBox2','dataBox1')" ><A href="#" >会员中心</A> </LI>
</UL>
</DIV>
</body>
</html>
不知道你是不是要做选项卡，我一般都是这样做选项卡的，这样写可以减少JS的代码，相反HTML代码会较多点！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
#nav {
PADDING-BOTTOM: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
HEIGHT: 39px;
PADDING-TOP: 0px;
background-color:#C00;
}
#nav UL {
PADDING-BOTTOM: 0px;
LIST-STYLE-TYPE: none;
MARGIN: 0px;
PADDING-LEFT: 0px;
PADDING-RIGHT: 0px;
PADDING-TOP: 0px;
}
#nav UL LI {
TEXT-ALIGN: center;
WIDTH: 106px;
FLOAT: left;
HEIGHT: 25px;
FONT-WEIGHT: bold;
PADDING-TOP: 14px
}
#nav UL LI.cum {
TEXT-ALIGN: center;
WIDTH: 106px;
background-color:#FFF;
border:1px solid #900;
FLOAT: left;
HEIGHT: 25px;
COLOR: #3c0067;
FONT-WEIGHT: bold;
PADDING-TOP: 14px
}
#nav UL LI.cum A:link {
COLOR: #cd0000;
TEXT-DECORATION: none
}
#nav UL LI.cum A:visited {
COLOR: #cd0000;
TEXT-DECORATION: none
}
#nav UL LI.cum A:hover {
COLOR: #333333;
TEXT-DECORATION: none
}
-->
</style>
<script language="javascript" type="text/javascript">
<!--
function changeMc(x,y){
// x是当前显示的层 y是即将显示的层
document.getElementById(x).style.display = "none"
document.getElementById(y).style.display = "block"
}
-->
</script>
</head>
<body>
<DIV id=nav class=main_w>
<UL id="dataBox1" style="display:block;">
<LI onclick="javascript:changeMc('dataBox1','dataBox2')" ><A href="#" >代理加盟</A> </LI>
<LI onclick="javascript:changeMc('dataBox2','dataBox1')" class="cum"><A href="#" >会员中心</A> </LI>
</UL>
<UL id="dataBox2" style="display:none;" >
<LI onclick="javascript:changeMc('dataBox1','dataBox2')" class="cum"><A href="#" >代理加盟</A> </LI>
<LI onclick="javascript:changeMc('dataBox2','dataBox1')" ><A href="#" >会员中心</A> </LI>
</UL>
</DIV>
</body>
</html>
不知道你是不是要做选项卡，我一般都是这样做选项卡的，这样写可以减少JS的代码，相反HTML代码会较多点！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你如果只是实现这个效果的话，就没必要写js，那样会加载网站的运营的速度的，可以直接通过Css来改变其效果！也就相当于hover的效果，通过onclick换掉其css样式即可！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
onclick="this.style.background=url('路径')"
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
