各位大侠,请帮忙
各位,我想要在一级链接文字点击后有一个背景图片,可是,总是不成功,请大家帮我看看,谢谢了
代码如下:
<!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" />
<link rel="stylesheet" type="text/css" href="css/css.css"/>
<style type="text/css">
#droplinebar {overflow: hidden;}
.nav1 {width:320px; height:30px;}
.nav1 li{ display: inline; height:35px; font-size:12px;}
.nav1 li a{float:left; background:none;display: block; width:80px; height:30px; line-height:30px; text-align:center; color:#575757; }
.nav1 li a:hover{ color:#fff;height:30px; background: url(images/nav_bj.png) no-repeat; }
.xnav {position: absolute; color:#000;z-index: 100; height:25px; line-height:25px; background:#ebebeb; border-radius:15px; visibility: hidden;}
.xnav li a{ display:block; font-size:11px; color:#000;margin:0; line-height:25px; float:left;}
.xnav li a:hover{text-align:center;margin:0;background:none; color:#000;}
</style>
<title>首页</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/droplinemenu.js" type="text/javascript"></script>
<script type="text/javascript">
//build menu with DIV ID="myslidemenu" on page:
droplinemenu.buildmenu("mydroplinemenu")
</script>
</head>
<body>
<div id="mydroplinemenu" class="droplinebar">
<ul class="nav1">
<li><a href="#" onclick="changeBgColor(this)">新病人录入</a></li>
<li><a href="#" onclick="changeBgColor(this)">随机列表</a></li>
<li><a href="#" onclick="changeBgColor(this)">后台管理</a>
<ul class="xnav">
<li><a href="#">中心用户管理</a></li>
<li><a href="#">项目用户管理</a></li>
<li><a href="#">中心管理</a></li>
<li><a href="#">中心管理</a></li>
</ul>
</li>
<li><a href="#" onclick="changeBgColor(this)">退出</a></li>
</ul>
</div>
</html>
下拉特效可以暂时不考虑,谢谢了
[解决办法]
function changeBgColor(obj) { obj.style.backgroundColor = '#CCC';}
[解决办法]
<!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=gbk" /><link rel="stylesheet" type="text/css" href="css/css.css"/><style type="text/css">#droplinebar {overflow: hidden;}.nav1 {width:320px; height:30px;}.nav1 li{ display: inline; height:35px; font-size:12px;}.nav1 li a{float:left; background:none;display: block; width:80px; height:30px; line-height:30px; text-align:center; color:#575757; }.nav1 li a:hover{ color:#fff;height:30px; background: url(images/nav_bj.png) no-repeat; }.xnav {position: absolute; color:#000;z-index: 100; height:25px; line-height:25px; background:#ebebeb; border-radius:15px; visibility: hidden;}.xnav li a{ display:block; font-size:11px; color:#000;margin:0; line-height:25px; float:left;}.xnav li a:hover{text-align:center;margin:0;background:none; color:#000;}</style><title>首页</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript"> function changeBgColor(t){ $(t).css('backgroundColor', 'red').parent().siblings().children('a').css('backgroundColor', '#fff') }</script></head><body><div id="mydroplinemenu" class="droplinebar"> <ul class="nav1"> <li><a href="#" onclick="changeBgColor(this)">新病人录入</a></li> <li><a href="#" onclick="changeBgColor(this)">随机列表</a></li> <li><a href="#" onclick="changeBgColor(this)">后台管理</a> <ul class="xnav"> <li><a href="#">中心用户管理</a></li> <li><a href="#">项目用户管理</a></li> <li><a href="#">中心管理</a></li> <li><a href="#">中心管理</a></li> </ul> </li> <li><a href="#" onclick="changeBgColor(this)">退出</a></li> </ul></div></html>