jQuery仿淘宝网产品品牌隐藏与显示效果


Posted in Javascript onSeptember 01, 2015

本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果。分享给大家供大家参考。具体如下:

这里演示jQuery实现产品品牌隐藏与显示效果,仿淘宝网商品列表的品牌显示与折叠功能,很实用的代码,看了就知道了。

运行效果截图如下:

jQuery仿淘宝网产品品牌隐藏与显示效果

在线演示地址如下:

具体代码如下:

<!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=utf-8" />
<title>jQuery产品品牌隐藏与显示,仿淘宝网</title>
<style type="text/css">
*{ margin:0; padding:0;}
body {font-size:12px;text-align:center;}
a { color:#04D; text-decoration:none;}
a:hover { color:#F50; text-decoration:underline;}
.SubCategoryBox {width:600px; margin:0 auto; text-align:center;margin-top:40px;}
.SubCategoryBox ul { list-style:none;}
.SubCategoryBox ul li { display:block; float:left; width:200px; line-height:20px;}
.showmore { clear:both; text-align:center;padding-top:10px;}
.showmore a { display:block; width:120px; margin:0 auto; line-height:24px; border:1px solid #AAA;}
.showmore a span { padding-left:15px; background:url(images/down.gif) no-repeat 0 0;}
.promoted a { color:#F50;}
</style>
<!-- 引入jQuery -->
<script src="jquery-1.6.2.min.js" type="text/javascript"></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
  $('.showmore a span')
  .css("background","url(images/down.gif) no-repeat 0 0") 
   .text("显示全部品牌"); //改变背景图片和文本
   $('ul li').removeClass("promoted"); // 去掉高亮样式
  }else{
   $category.show(); // 显示$category
   $('.showmore a span')
   .css("background","url(images/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="#"><span>显示全部品牌</span></a>
</div>
</div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
如何快速的呈现我们的网页的技巧整理
Jul 01 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
表单切换,用回车键替换Tab健(不支持IE)
Jul 20 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
jQuery的观察者模式详解
Dec 22 Javascript
jQuery Mobile和HTML5开发App推广注册页
Nov 07 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
深入理解vue-router之keep-alive
Aug 31 Javascript
Vue-CLI项目中路由传参的方式详解
Sep 01 Javascript
Vue组件基础用法详解
Feb 05 Javascript
JavaScript中this详解
Sep 01 #Javascript
JS实现的自定义右键菜单实例二则
Sep 01 #Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 #Javascript
jquery常用函数与方法汇总
Sep 01 #Javascript
js+CSS实现模拟华丽的select控件下拉菜单效果
Sep 01 #Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 #Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 #Javascript
You might like
星际争霸兵种名称对照表
2020/03/04 星际争霸
php使用function_exists判断函数可用的方法
2014/11/19 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
php实现将Session写入数据库
2015/07/26 PHP
Yii2分页的使用及其扩展方法详解
2016/05/23 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JS回调函数的应用简单实例
2014/09/17 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
jquery自定义表单验证插件
2016/10/12 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
对Python3中dict.keys()转换成list类型的方法详解
2019/02/03 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
python3实现绘制二维点图
2019/12/04 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
如何用border-image实现文字气泡边框的示例代码
2020/01/21 HTML / CSS
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
烹调加工管理制度
2014/02/04 职场文书
卫生院健康教育实施方案
2014/06/07 职场文书
三严三实学习心得体会
2014/10/13 职场文书
员工工作能力评语
2014/12/31 职场文书
幼儿园大班毕业评语
2014/12/31 职场文书