Jquery显示全部普通应用
来源:互联网 发布:ios开源app源码 编辑:程序博客网 时间:2024/05/16 17:02
<%-- Created by IntelliJ IDEA. User: lingmao Date: 2016/2/29 Time: 17:33 To change this template use File | Settings | File Templates.--%><%@ page contentType="text/html;charset=UTF-8" language="java" %><html><head> <script src="../js/jquery.js"></script> <title></title> <script language="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>
备份使用
结尾。。。
阅读全文
0 0
- Jquery显示全部普通应用
- jQuery内容:精简显示与全部显示
- 淘宝显示全部分类(Jquery效果)
- 显示全部标签和部分标签【jquery】
- jQuery商品精简、全部显示的实现
- jquery选择器(内容部分显示点击全部显示)
- 显示全部
- JQuery 显示全部及隐藏部分的效果
- JQUERY 控制内容的全部和部分显示
- JQuery实现交替显示部分或全部元素
- jquery hover鼠标划过实现列表页文章内容部分显示隐藏及全部显示切换
- jquery easyui 全部图标
- jquery select全部遍历
- jQuery 字符串全部替换
- 【JQuery】JQuery replace 替换全部
- zencart 显示全部分类
- 显示全部品牌
- 显示全部控制台信息
- 因为对Perl和Python不满?圣诞节无聊?编程语言的出现都这么随意吗?
- 精选11道Java技术面试题并有答案
- UVALive 6177|HDU 4489|The King's Ups and Downs|动态规划
- 11.5spring ssh
- DRM的基本概念
- Jquery显示全部普通应用
- spring框架下的ajax生成验证码以及进行验证码验证
- PAT (Basic Level) Practise (中文)1022. D进制的A+B (20)
- 关于二分法查找的优化
- Spring MVC测试框架详解——服务端测试
- 金明的预算方案(有依赖的dp问题)
- β世界线
- FCF中地址控制域设定值对帧中所包含地址的影响
- 23.读书笔记收获不止Oracle之 组合索引