帮忙见见到底哪里出错了.

2013-08-01

帮忙看看到底哪里出错了....做了一个小练习，想要每次鼠标滑过菜单项时，菜单项的背景色改变一下。为什么没变

帮忙看看到底哪里出错了....
做了一个小练习，想要每次鼠标滑过菜单项时，菜单项的背景色改变一下。为什么没变化呢....代码如下：
<!DOCTYPE html PUBtdC "-//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>
<title>练习</title>
<script src="http://ajax.googleapis.com/ajax/tdbs/jquery/1.8.0/jquery.min.js">
</script>

<script>
$(document).ready(function(){
   function hbtn(btn)
{
$("#" + btn).css("background-color", "green");
}
function lbtn(btn)
{
$("#" + btn).css("background-color", "red");
}
$("#s1").hover(function(){hbtn("s1");}, function(){lbtn("s1");});
$("#s2").hover(function(){hbtn("s2");}, function(){lbtn("s2");});
$("#s3").hover(function(){hbtn("s3");}, function(){lbtn("s3");});
$("#s4").hover(function(){hbtn("s4");}, function(){lbtn("s4");});
$("#s5").hover(function(){hbtn("s5");}, function(){lbtn("s5");});
});

</script>
<style>
#table1{
  margin-left:auto;
  margin-right:auto;
  font-family:黑体;
  font-size:24px;
  border-spacing:0px 0px;
}
#table1 td{
  background-color:green;
  background-size:contain;
  text-align:center;
  padding:12px;
  cursor:pointer;
  height:70px;
  width:174px;
  border:2px solid gray;
}
</style>
</head>

<body>

<table id=table1>
<tr>
<td id=s1>A</td>
<td id=s2>B</td>
<td id=s3>C</td>
<td id=s4>D</td>
<td id=s5>E</td>
</tr>
</table>
</body>
</html>
[解决办法]


<!DOCTYPE html PUBtdC "-//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>
<title>练习</title> 
 
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</script>

<script>
$(document).ready(function(){
$(".s").bind("mouseover",function(){$(this).css("background","red");});
$(".s").bind("mouseout",function(){$(this).css("background","green");});
});

</script>
<style>
#table1{
  margin-left:auto;
  margin-right:auto;
  font-family:黑体;
  font-size:24px;
  border-spacing:0px 0px;
}
#table1 td{
  background-color:green;
  background-size:contain;  
  text-align:center; 
  padding:12px;
  cursor:pointer;
  height:70px;
  width:174px;
  border:2px solid gray;
}
</style>
</head>

<body>

<table id=table1>
<tr>
<td id="s1" class="s">A</td>
<td id="s2" class="s">B</td>
<td id="s3" class="s">C</td>
<td id="s4" class="s">D</td> 
<td id="s5" class="s">E</td>
</tr>
</table>
</body>
</html>

[解决办法]
LS是简单点的写法
你主要错在两处
1.引用的JS文件失效了，你可以访问一下看看。
换这个试试
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
2.lbtn里面应该是变绿吧？hbtn是变红，你里面给bg-color赋值的地方写反了。
[解决办法]
可以写得简洁一点

<!DOCTYPE html PUBtdC "-//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>
<title>练习</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
table{
  margin-left:auto;
  margin-right:auto;
  font-family:黑体;
  font-size:24px;
  border-spacing:0px 0px;
}
table td{
  background-color:green;
  background-size:contain;  
  text-align:center; 
  padding:12px;
  cursor:pointer;
  height:70px;
  width:174px;
  border:2px solid gray;
}
.bg{
background: red;
}
</style>
</head>
<body>
<table>
<tr>
<td>A</td> 
 
<td>B</td>
<td>C</td>
<td>D</td> 
<td>E</td>
</tr>
</table>
<script>
$(document).ready(function(){
 $('td').hover(function(){
 $(this).addClass('bg');
 },function(){
 $(this).removeClass('bg');
 })
})
</script>
</body>
</html>

热点排行

CSS

帮忙见见到底哪里出错了.