<!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> </head> <link href="reset.css" rel="stylesheet" type="text/css" /> <style type="text/css"> #d1{ 100%; height:850px; background:#069;overflow:hidden;} #d2{ 100%; height:850px; background:#933;overflow:hidden;} #d3{ 100%; height:850px; background:#060;overflow:hidden;} #d4{ position:fixed; top:50%; right:0;} #d4 a{ display:block; 100px; height:100px;} #d4 .hover{ background:#063;} </style> <body> <div id="d4"> <ul> <li><a href="javascript:void(0);">1</a></li> <li class="hover"><a href="javascript:void(0);">2</a></li> <li><a href="javascript:void(0);">3</a></li> </ul> </div> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> <script src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $("#d4 a").click(function(){$(this).addClass("hover").siblings().removeClass()})//这样无效
$("#d4 li").click(function(){$(this).addClass("hover").siblings().removeClass()})//这样有效 }) </script> </body> </html>
不知道为什么不起作用还是我写法有问题，先记录下