首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

各位大侠,请帮忙解决办法

2012-05-29 
各位大侠,请帮忙各位,我想要在一级链接文字点击后有一个背景图片,可是,总是不成功,请大家帮我看看,谢谢了

各位大侠,请帮忙
各位,我想要在一级链接文字点击后有一个背景图片,可是,总是不成功,请大家帮我看看,谢谢了

代码如下:

<!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>


下拉特效可以暂时不考虑,谢谢了


[解决办法]

JScript code
function changeBgColor(obj) {    obj.style.backgroundColor = '#CCC';}
[解决办法]
HTML code
<!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> 

热点排行