<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/default.css">
<script type="text/javascript" src="js/jquery-1.7.js"></script>
<script type="text/javascript">
$(function(){ // 等待DOM加载完毕.
var $category = $('ul li:gt(5):not(:last)'); // 获得索引值大于5的品牌集合对象(除最后一条)
$category.hide(); // 隐藏上面获取到的jQuery对象。
var toggleBtn = $('div.showmore > a'); // 获取“显示全部品牌”按钮
toggleBtn.click(function(){
if($category.is(":visible")){
$category.hide(); // 隐藏$category
$(this).find('span')
.css("background","url(img/down.gif) no-repeat 0 0")
.text("显示全部品牌"); //改变背景图片和文本
$('ul li').removeClass("promoted"); // 去掉高亮样式
}else{
$category.show(); // 显示$category
$(this).find('span')
.css("background","url(img/up.gif) no-repeat 0 0")
.text("精简显示品牌"); //改变背景图片和文本
$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('奥林巴斯')")
.addClass("promoted"); //添加高亮样式
}
return false; //超链接不跳转
})
})
</script>
</head>
<body>
<div class="SubCategoryBox">
<ul>
<li ><a href="#">佳能</a><i>(30440) </i></li>
<li ><a href="#">索尼</a><i>(27220) </i></li>
<li ><a href="#">三星</a><i>(20808) </i></li>
<li ><a href="#">尼康</a><i>(17821) </i></li>
<li ><a href="#">松下</a><i>(12289) </i></li>
<li ><a href="#">卡西欧</a><i>(8242) </i></li>
<li ><a href="#">富士</a><i>(14894) </i></li>
<li ><a href="#">柯达</a><i>(9520) </i></li>
<li ><a href="#">宾得</a><i>(2195) </i></li>
<li ><a href="#">理光</a><i>(4114) </i></li>
<li ><a href="#">奥林巴斯</a><i>(12205) </i></li>
<li ><a href="#">明基</a><i>(1466) </i></li>
<li ><a href="#">爱国者</a><i>(3091) </i></li>
<li ><a href="#">其它品牌相机</a><i>(7275) </i></li>
</ul>
<div class="showmore">
<a href="more.html"><span>显示全部品牌</span>
</a>
</div>
</div>
</body>
</html>
分享到:
相关推荐
NULL 博文链接:https://wangxinxiang.iteye.com/blog/406905
压缩文件中,包含jquery使用的js脚本文件,jquery介绍文档(包括pdf和教程),对应出学者是一个很好的学习资料
对学习jQuery的初学着来说具有很高借鉴意义的一套实例代码,可以一边学习jQuery,一边看看实例代码,对学习提高很快。
资源名称:Jquery学习文档 中文WORD版内容简介:本文档主要讲述的是Jquery学习文档;jQuery是继Prototype之后有一个优秀的Javascript库,是一个由John Resig创建于2006年1月的开源项目。现在的jQuery团队主要...
这个资源 可以使你全面的掌握 JQuery,里面有我告诉你如何学习Jquery如何使用Jquery,里面还有Jquery的例子,还有Jquery的拓展UI,很好很强大的!!!这绝对是我精心压缩的一个资源,如果没学会,可以给我留言,然后...
jquery学习笔记,很全面的介绍jquery的用法。 存在的html片段)包装成jQuery对象。 $()方法里面支持的语法又包括3大类,分别是表达式(包括类表达式.,id表达式#,元素表达式等)、符号(包括后代符号space,next符号+...
NULL 博文链接:https://goyourauntie.iteye.com/blog/745626
本人学习jquery的代码和笔记,主要是jquery的入门知识,以及前后台数据交互。包括一个jquery的web工程和一个配置好的tomcat。jquery工程是用myeclipse10做的,如果eclipse打不开可以重新建工程,再把对应的文件拷贝...
1.1 学习jQuery之前,需要以下基础知识 HTML CSS JavaScript 1、jQuery简介 1.2 什么是jQuery? jQuery是一个JavaScript函数库 轻量级,“写的少,做的多” 包含以下功能: HTML元素选取 HTML元素操作 CSS操作 HTML...
从昨天开始学习JQuery,起因是希望在jsp页面上实现菜单功能,在网上搜索了一些资料,有人推荐用JQuery,那就先试试。 什么是JQuery?我也不是很清晰,感觉好像是javascript的一套类库。详细资料请到:...
国内第一本jQuery权威教程,一版再版,累计重印14次,不可错过的实战类经典技术著作! 本书是jQuery经典技术教程的最新升级版,涵盖jQuery 1.10.x和jQuery 2.0.x。本书前6章以通俗易懂的方式讲解了jQuery的核心组件...
从零开始学习jQuery (一) 开天辟地入门篇 2 一.摘要 2 二.前言 3 三.什么是jQuery 3 四.Hello World jQuery 4 五.启用Visual Studio 对jQuery的智能感知 6 六.在独立的.JS文件中启用脚本智能感知 8 七.总结 9 从零...
一步步教会你jquery的实践运用
jquery 学习笔记源码 1第一个jquery
本系列文章将带您进入jQuery 的精彩世界, 其中有很多...本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery 代码 以及搭建开发环境. 详细讲解了如何在Visual Studio 中配合使用jQuery.
jQuery学习名额大转盘抽奖代码是一款抽奖完成会弹出奖品表单信息代码。
这是一部非常好用的、快速的jquery学习手册,尤其是对初学者,里面包括核心、属性、选择器、事件、css、文档处理、效果、筛选等几大部分。
jquery学习必备资料,让你从一个菜鸟成为高手的途径............
jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少,做的多"的JavaScript库。