`
xllily
  • 浏览: 122724 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jqu操作class 实现动态导航菜单

阅读更多
 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
0
10
分享到:
评论

相关推荐

    jq垂直手风琴导航菜单

    在实现jq垂直手风琴导航菜单的过程中,开发者还需要考虑性能优化,避免过度使用DOM操作,以及代码的模块化和可维护性。通过理解这些知识点,你可以创建出既美观又实用的导航菜单,提升网站的整体用户体验。在提供的...

    【Jquery经典特效3】商城侧边导航定位jquery菜单

    这种导航菜单的定位功能,可以通过jQuery实现动态跟随、响应式布局等多种高级效果。 首先,我们来看jQuery的基本用法。要使用jQuery,我们需要在HTML文档中引入jQuery库,通常是通过CDN链接或本地文件。例如: ```...

    jquery放大缩小文字导航

    这种方式通常用于主导航栏,使菜单项更加醒目,吸引用户的注意力。 jQuery是一个轻量级、高性能的JavaScript库,提供了丰富的API供开发者使用。在这个特定的案例中,主要涉及到的知识点包括: 1. **jQuery选择器**...

    【Jquery经典特效24】jQuery鼠标悬停向上滑出遮罩效果

    这个效果在网页设计中常用于导航菜单、图片展示或信息提示,为用户提供更加交互式的体验。下面我们将详细讲解实现这一特效的关键步骤和相关知识点。 首先,我们需要在HTML结构中设置基础元素。通常,我们会有一个...

    DeepSeek行业应用实践报告-智灵动力PPT全

    DeepSeek行业应用实践报告-智灵动力【PPT全】

    基于SSH的线上医疗报销系统.zip-毕设&课设&实训&大作业&竞赛&项目

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    机器学习大作业-复现KAN网络.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    基于Android和TensorFlow Lite完成移动端机器学习相关应用的实现(毕设&课设&实训&大作业&竞赛&项目)

    基于Android和TensorFlow Lite完成移动端机器学习相关应用的实现,包括使用已训练模型的机器学习应用和自主模型训练两部分。.zip项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    同时识别多个手写数字(或印刷体)

    这是一个基于 PyQt5 和 TensorFlow 的多数字手写体识别程序,支持同时识别图片中的多个手写数字。以下是该文件的基本说明: 主窗口:包含加载图片、识别、清除按钮,以及图片显示区域和结果展示区域。 图片显示:支持显示原始图片和处理后的图片。 分割结果显示:显示分割出的每个数字图片。 结果展示:显示所有识别结果和置信度。

    基于机器学习的情感分析(2极).zip(课设&实训&大作业&项目)

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    在云服务器上搭建MQTT服务器(超详细,一步到位)

    在云服务器上搭建MQTT服务器(超详细,一步到位)

    《由一组学习机器学习的学生用 Python 开发计算机游戏》(毕业设计,源码,教程)简单部署即可运行 功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是均来自个人的课程设计、毕业设计或者具体项目,代码都测试ok,都是运行成功后才上传资源,答辩评审绝对信服的,拿来就能用。放心下载使用!源码、说明、论文、数据集一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供学习参考, 切勿用于商业用途。 4、如有侵权请私信博主,感谢支持

    (参考项目)MATLABA交通标志识别.zip

    参考项目,评分9.8分

    基于Unity实现的语音识别人物面部表情改变-源码工程.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    基于FX3U PLC控制多种变频器的RTU通信系统:硬件配置、程序编写、接线及参数说明,基于FX3U PLC与RTU通信技术,实现对西门子V20、台达VFD-M和三菱E700变频器的独立控制:硬件配置

    基于FX3U PLC控制多种变频器的RTU通信系统:硬件配置、程序编写、接线及参数说明,基于FX3U PLC与RTU通信技术,实现对西门子V20、台达VFD-M和三菱E700变频器的独立控制:硬件配置与程序详解,fx3u和西门子v20 台达vfd-m 三菱E700 rtu所需硬件:FX3U PLC,FX3U-485BD通信板,变频器。 功能:使用fx3u-485bd板,rtu通信控制西门子v20 台达VFD-M 三菱E700三种变频器正反转,停止,频率设定,加减速,以及对频率,电压,电流的读取,有运行指示,效果可以看视频,反应及时,运行可靠,三种变频器程序是单个的,非三台一起控制。 的内容包括程序,接线,参数说明 ,核心关键词: fx3u-485bd; 西门子v20; 台达VFD-M; 三菱E700; 通信控制; 正反转; 停止; 频率设定; 加减速; 读取; 运行指示; 视频; 程序; 接线; 参数说明,FX3U PLC控制多种变频器程序:程序、接线与参数说明

    基于SSM框架的婚纱礼服定制网站(毕设&课设&实训&大作业&竞赛&项目)

    软件开发综合项目——辛德瑞拉婚纱礼服定制网站,使用SSM框架和Maven管理工具,开发环境为Eclipse Jee Photon,数据库使用MySQL.zip项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    基于PHP和HTML5的音乐网站.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行,功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

    惠普436/437更换传输卷

    惠普436/437更换传输卷

    rabbmit相关安装包

    erlang安装包,rabbmit安装环境

    大创项目网页设计:心田农场.zip

    项目工程资源经过严格测试运行并且功能上ok,可实现复现复刻,拿到资料包后可实现复现出一样的项目,本人系统开发经验充足(全栈全领域),有任何使用问题欢迎随时与我联系,我会抽时间努力为您解惑,提供帮助 【资源内容】:包含源码+工程文件+说明等。答辩评审平均分达到96分,放心下载使用!可实现复现;设计报告也可借鉴此项目;该资源内项目代码都经过测试运行;功能ok 【项目价值】:可用在相关项目设计中,皆可应用在项目、毕业设计、课程设计、期末/期中/大作业、工程实训、大创等学科竞赛比赛、初期项目立项、学习/练手等方面,可借鉴此优质项目实现复刻,设计报告也可借鉴此项目,也可基于此项目来扩展开发出更多功能 【提供帮助】:有任何使用上的问题欢迎随时与我联系,抽时间努力解答解惑,提供帮助 【附带帮助】:若还需要相关开发工具、学习资料等,我会提供帮助,提供资料,鼓励学习进步 下载后请首先打开说明文件(如有);整理时不同项目所包含资源内容不同;项目工程可实现复现复刻,如果基础还行,也可在此程序基础上进行修改,以实现其它功能。供开源学习/技术交流/学习参考,勿用于商业用途。质量优质,放心下载使用

Global site tag (gtag.js) - Google Analytics