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垂直手风琴导航菜单的过程中,开发者还需要考虑性能优化,避免过度使用DOM操作,以及代码的模块化和可维护性。通过理解这些知识点,你可以创建出既美观又实用的导航菜单,提升网站的整体用户体验。在提供的...
本主题将深入探讨如何使用jQuery实现一个菜单手风琴效果,特别是针对三种不同的操作模式以及如何支持多组手风琴菜单。 首先,让我们了解“手风琴”菜单的概念。手风琴菜单是一种用户界面元素,它允许在一个有限的...
jQuery作为一个快速、小巧、功能强大的JavaScript库,它简化了HTML文档遍历和事件处理,以及动画和Ajax交互等操作,非常适合用来实现动态搜索显示功能。 首先,实现动态搜索显示功能的第一步是要有一个数据源。在...
这种导航菜单的定位功能,可以通过jQuery实现动态跟随、响应式布局等多种高级效果。 首先,我们来看jQuery的基本用法。要使用jQuery,我们需要在HTML文档中引入jQuery库,通常是通过CDN链接或本地文件。例如: ```...
在DOS时期,由于系统限制,我们可以通过直接操作显存中的色彩寄存器来实现这种效果。然而,随着Windows系统的普及,这种方法不再适用,因为修改调色板的方法仅适用于256色位图,而DirectX编程虽然提供了更强大的功能...
2.1 用户交互:使用JQuery监听用户触发的事件(如点击按钮),在事件处理器中执行排序逻辑,从而实现动态排序。 2.2 自定义排序规则:`.sort()`函数可以接受一个比较函数作为参数,根据自定义规则进行排序。例如,...
这种方式通常用于主导航栏,使菜单项更加醒目,吸引用户的注意力。 jQuery是一个轻量级、高性能的JavaScript库,提供了丰富的API供开发者使用。在这个特定的案例中,主要涉及到的知识点包括: 1. **jQuery选择器**...
新闻滚动效果是网页设计中常用的一种动态展示技术,它能够以滑动或切换的方式呈现多条新闻,使得网站内容更新更具有吸引力,提高用户的浏览体验。JQuery 是一个广泛使用的JavaScript库,它简化了HTML文档操作、事件...
通过使用jQuery,开发者可以更方便地操作DOM元素,实现页面动态效果和用户交互。学习jQuery,你需要掌握选择器(如ID选择器、类选择器、属性选择器等)、DOM操作(添加、删除、修改元素)、事件处理和动画效果。此外...
jQuery是一款著名的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作和Ajax交互。它的语法简洁、易用,是初学者快速掌握JavaScript编程的利器。"simple-jQuery"项目旨在为初学者提供一个简化的...
在IT行业中,前端开发是至关重要的一环,而jQuery作为一个强大的JavaScript库,极大地简化了DOM操作,事件处理以及动画效果的创建。"jquery表单控件美化"是一个专注于提升网页表单用户体验的主题,尤其是在ASP.NET...
1. **选择器与DOM操作**:jQuery提供了丰富的选择器用于选取DOM元素,如`$("#id")`选择ID为id的元素,`$(".class")`选择所有class为class的元素。通过`.html()`、`.append()`、`.prepend()`等方法,可以进行内容的...
在网页设计中,动态的、交互式的用户体验往往能提升网站的吸引力。其中,幻灯片(Slider)是一种常见的元素,常用于展示产品、图片集或者新闻等。"jQuery带缩略图自动轮播幻灯片代码"就是这样一个实现方式,它结合了...
结合以上信息,我们可以推断,"moeldv_JQU1SICI"可能是一个基于Salesforce平台的自动化脚本或应用的开发项目,"bot_dev01"是该项目的第一个开发版本,主要用于实现某些特定的自动化功能。 在解压后的文件名"moeldv_...
这样,即使用户滚动页面,表头也会始终保持在屏幕顶部,方便查看和操作。 要使用Decapitate,首先需要在项目中引入Bootstrap的相关库,包括CSS和JS文件,以及jQuery库。接着,将`jquery.decapitate.js`文件引入到...
在网页设计和开发中,jQuery 是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作等任务。本篇文章将详细讲解如何利用jQuery的slider功能来实现手风琴(Accordion)特效,这是一种常见的交互...
在网页设计中,这种功能常用于创建响应式的导航菜单或者侧边工具栏,可以随着用户的滚动行为进行显示或隐藏,提升用户体验。jQuery是一个流行的JavaScript库,它简化了JavaScript的DOM操作、事件处理和动画制作等...
在JavaScript的世界里,jQuery库以其简洁的语法和丰富的功能,深受开发者喜爱。今天我们要探讨的是一份名为"Javascripters大作--...通过深入理解和合理运用这个插件,开发者可以轻松地为自己的项目增添动态和交互性。
基于Bootstrap Ace的一套扁平化后台管理系统
MySQL JDBC驱动包是Java应用程序与MySQL数据库进行交互的重要组件,它实现了Java Database Connectivity (JDBC) API,使得Java开发者能够方便地在Java程序中执行SQL语句,进行数据的读写操作。本驱动包名为“mysql-...