最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery点击导航栏选中更换样式的实现代码
时间:2017-03-05 编辑:简简单单 来源:一聚教程网
代码如下 | 复制代码 |
*{ margin:0; padding:0; border:0px; list-style:none; margin:0 auto;} *a { text-decoration:none; color:#FFF;} ul { width:800px; height:30px; background-color:#C33;} ul li { float:left; width:160px; height:30px; line-height:30px; text-align:center; color:#FFFFFF;} ul li a { color:#FFFFFF; display:block; width:160px; height:30px; text-decoration:none;} .first { background-color:#0000FF;} ul li a:hover {color:#FFF; display:block; width:160px; height:30px; text-decoration: underline; background-color:#03F;} $(document).ready(function(){ $("li").each(function(index){ $(this).click(function(){ $("li").removeClass("first"); $("li").eq(index).addClass("first"); }); }); });
|