jqu操作class 实现动态导航菜单
2015-07-14 11:48
375 查看
html部分代码
<!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=gb2312" /> <title>CSS-JQuery Menu01</title> <link rel="stylesheet" type="text/css" href="css/menu.css"/> <script type="text/javascript" src="JQuery/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="JQuery/menu.js"></script> </head> <body> <div class="menu outer"> <div class="inner"> <ul> <li class="selected" style="background:none;"><a href="#">首页</a></li> <li><a href="#">新闻</a></li> <li><a href="#">体育</a></li> <li><a href="#">财经</a></li> <li><a href="#">汽车</a></li> <li><a href="#">房产</a></li> <li><a href="#">股市</a></li> <li><a href="#">旅游</a></li> <li><a href="#">美食</a></li> <li><a href="#">女性</a></li> <li><a href="#">播客</a></li> <li><a href="#">拼客</a></li> <li><a href="#">交友</a></li> <li><a href="#">大杂烩</a></li> </ul> </div> </div> </body> </html>
2.JQuery/menu.js $(function(){ var span = '<span></span>'; $('.menu li a').wrapInner(span); $('.menu li').click(function(){ $(this).addClass('selected') .siblings().removeClass('selected'); }); });
.siblings(). 这个函数方法说明一下 这是便利所有 拥有'selected‘的兄弟子元素 然后再移除这个类
大小: 14.5 KB
查看图片附件
相关文章推荐
- jQuery快捷学习大总结 jQuery-1.3.2.js学习笔记
- 用JS判断单选按钮是否选中
- 用JS判断单选按钮是否选中
- 验证用户名是否存在
- 验证用户名是否存在
- Ajax验证用户名是否存在
- 快试试在google 搜索 “SB” 你有惊喜发现 百度同样
- Css 中添加class 引起的恼人问题 必看必看
- 完成端口(CompletionPort)之客户端篇
- DATALIST正反向排序,带▲和▼提示的【转二】
- cmd&Linux 下使用mysql全记录
- 我的第一堂Java课 07/14 上午
- 我的第一堂Java课 07/14 上午
- IIS7.5上的REST服务的Put操作发生HTTP Error 405.0 - Method Not Allowed 解决方法
- W7 32 IIS 数据库连接出错,请检查连接字串
- 出现( linker command failed with exit code 1)错误总结
- 持续集成自动化(一)_Jenkins安装
- 难道我们可以不用Google? 你OUT了
- 最简洁实用的tab切换,tab选项卡
- 写代码时各种注释 引起的致命问题