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
分享到:
相关推荐
jq 垂直手风琴 导航菜单 jquery jq 垂直手风琴 导航菜单 jquery
主要介绍了基于jQuery实现动态搜索显示功能的相关资料,输入数值自动匹配相关信息,感兴趣的小伙伴们可以参考一下
在DOS时代,我们可以简单地通过改变显存中的色彩寄存器的值来实现;到了Windows下面,实现起来就有些困难了,常见的方法有修改调色板配置,但这种方法有一个致命的缺点就是它只对256色的位图有效;还有的一种办法...
本文实例讲述了jQuery三级下拉列表导航菜单。分享给大家供大家参考。具体如下: jQuery三级下拉列表导航菜单基于jquery-1.8.3.min.js,可无限极分类,可智能判断是否有下级菜单,鼠标经过上次菜单显示下级菜单。 ...
实现超酷动态排序,如果再应用PHP可链接数据库再用图片形式实现超酷动态排序。
simple-jQuery:封装简单版的jQuery,替代初学者对jQuery源码研究的入门参考
以前初学时自己做的delphi,jquery,mysql笔记,适合广大初学者
新闻滚动效果 用Jquery来实现的 可以让新闻更加的生动的呈递给浏览者
【Jquery经典特效3】商城侧边导航定位jquery菜单
jquery的表单控件美化,里面有实例,asp.net下亲测可用
基于Bootstrap Ace的一套扁平化后台管理系统
jquery菜单手风琴_3种模式可以多组操作
decapitate是一款基于bootstrap的表格头固定jquery插件。该jquery插件可以在页面向下滚动时,将表格头固定在视口的顶部。
1、兼容 IE、FireFox、Chrome 等浏览器 2、在一个页面内可同时生成多个 Tree 实例 3、支持 JSON 数据 4、支持一次性静态生成 和 Ajax 异步加载 两种方式 ... 9、简单的参数配置 实现 灵活多变的功能
设计要求:该系统设计实现时主要从以下三个角色方面入手进行,每个角色具有不同功能: 用户端功能: 顾客进入系统浏览整体菜单; 顾客根据菜单进行选菜下单点菜; 顾客通过核对订单进行结账。 后台管理功能: 管理...
bot_dev01
<i class='icon'>这是元素内容</i> //i是动态生成 解决方法如下: $[removed]('click', '.icon', function(e) { alert('i添加点击事件成功'); }); 以上就是小编为大家带来的jqu
Manifest是一个可以为多值输入增加... 但是移除收件人是一个费劲的事情,但是使用这个插件,你知道用户会非常高兴这种用户操作体验的。 在线演示:http://justinstayton.com/jquery-manifest/ 标签:jQuery
网页动画素材 纯css3+jQuery实现抖音网红时钟动画特效(抖音资料)网页动画素材 纯css3+jQuery实现抖音网红时钟动画特效(抖音资料)网页动画素材 纯css3+jQuery实现抖音网红时钟动画特效(抖音资料)网页动画素材 ...
jQuery实现鼠标滑过鼠标变色功能