`
xllily
  • 浏览: 119769 次
  • 性别: 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作为一个快速、小巧、功能强大的JavaScript库,它简化了HTML文档遍历和事件处理,以及动画和Ajax交互等操作,非常适合用来实现动态搜索显示功能。 首先,实现动态搜索显示功能的第一步是要有一个数据源。在...

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

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

    “淡入浅出”效果的简单实现.doc

    在DOS时期,由于系统限制,我们可以通过直接操作显存中的色彩寄存器来实现这种效果。然而,随着Windows系统的普及,这种方法不再适用,因为修改调色板的方法仅适用于256色位图,而DirectX编程虽然提供了更强大的功能...

    用JQuery排序超酷JQuery

    2.1 用户交互:使用JQuery监听用户触发的事件(如点击按钮),在事件处理器中执行排序逻辑,从而实现动态排序。 2.2 自定义排序规则:`.sort()`函数可以接受一个比较函数作为参数,根据自定义规则进行排序。例如,...

    jquery放大缩小文字导航

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

    新闻滚动效果--juqery实现

    新闻滚动效果是网页设计中常用的一种动态展示技术,它能够以滑动或切换的方式呈现多条新闻,使得网站内容更新更具有吸引力,提高用户的浏览体验。JQuery 是一个广泛使用的JavaScript库,它简化了HTML文档操作、事件...

    delphi,jquery,mysql学习笔记

    通过使用jQuery,开发者可以更方便地操作DOM元素,实现页面动态效果和用户交互。学习jQuery,你需要掌握选择器(如ID选择器、类选择器、属性选择器等)、DOM操作(添加、删除、修改元素)、事件处理和动画效果。此外...

    simple-jQuery:封装简单版的jQu​​ery,替代初学者对jQuery源码研究的入门参考

    jQuery是一款著名的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。它的语法简洁、易用,是初学者快速掌握JavaScript编程的利器。"simple-jQuery"项目旨在为初学者提供一个简化的...

    jquery表单控件美化

    在IT行业中,前端开发是至关重要的一环,而jQuery作为一个强大的JavaScript库,极大地简化了DOM操作,事件处理以及动画效果的创建。"jquery表单控件美化"是一个专注于提升网页表单用户体验的主题,尤其是在ASP.NET...

    JQ轮播图代码,考呗可用

    1. **选择器与DOM操作**:jQuery提供了丰富的选择器用于选取DOM元素,如`$("#id")`选择ID为id的元素,`$(".class")`选择所有class为class的元素。通过`.html()`、`.append()`、`.prepend()`等方法,可以进行内容的...

    jQuery带缩略图自动轮播幻灯片代码

    在网页设计中,动态的、交互式的用户体验往往能提升网站的吸引力。其中,幻灯片(Slider)是一种常见的元素,常用于展示产品、图片集或者新闻等。"jQuery带缩略图自动轮播幻灯片代码"就是这样一个实现方式,它结合了...

    moeldv_JQU1SICI

    结合以上信息,我们可以推断,"moeldv_JQU1SICI"可能是一个基于Salesforce平台的自动化脚本或应用的开发项目,"bot_dev01"是该项目的第一个开发版本,主要用于实现某些特定的自动化功能。 在解压后的文件名"moeldv_...

    基于bootstrap的表格头固定jquery插件decapitate.zip_bootstrap_decapitate_jqu

    这样,即使用户滚动页面,表头也会始终保持在屏幕顶部,方便查看和操作。 要使用Decapitate,首先需要在项目中引入Bootstrap的相关库,包括CSS和JS文件,以及jQuery库。接着,将`jquery.decapitate.js`文件引入到...

    jQuery slider实现手风琴特效

    在网页设计和开发中,jQuery 是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作等任务。本篇文章将详细讲解如何利用jQuery的slider功能来实现手风琴(Accordion)特效,这是一种常见的交互...

    ( 11、jQuery滑动展开侧边固定面板代码

    在网页设计中,这种功能常用于创建响应式的导航菜单或者侧边工具栏,可以随着用户的滚动行为进行显示或隐藏,提升用户体验。jQuery是一个流行的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画制作等...

    Javascripters大作--jQuery弹出层插件

    在JavaScript的世界里,jQuery库以其简洁的语法和丰富的功能,深受开发者喜爱。今天我们要探讨的是一份名为"Javascripters大作--...通过深入理解和合理运用这个插件,开发者可以轻松地为自己的项目增添动态和交互性。

    Bootstrap Ace.zip_ace admin jqgrid_bootstrap_bootstrap ACE下载_jqu

    基于Bootstrap Ace的一套扁平化后台管理系统

    mysql-jdbc驱动包

    MySQL JDBC驱动包是Java应用程序与MySQL数据库进行交互的重要组件,它实现了Java Database Connectivity (JDBC) API,使得Java开发者能够方便地在Java程序中执行SQL语句,进行数据的读写操作。本驱动包名为“mysql-...

Global site tag (gtag.js) - Google Analytics