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 相关文章推荐
用ASP将SQL搜索出来的内容导出为TXT的代码
Jul 27 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
Apr 14 Javascript
JS/Jquery判断对象为空的方法
Jun 11 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
js+html5实现canvas绘制网页时钟的方法
May 21 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
Apr 24 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
中英文字符串翻转函数
2008/12/09 PHP
深入理解PHP之require/include顺序 推荐
2011/01/02 PHP
PHP 第一节 php简介
2012/04/28 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
基于JavaScript实现移除(删除)数组中指定元素
2016/01/04 Javascript
Bootstrap学习笔记之css样式设计(2)
2016/06/07 Javascript
jQuery中get方法用法分析
2016/12/07 Javascript
js实现自定义路由
2017/02/04 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
Vue 中批量下载文件并打包的示例代码
2017/11/20 Javascript
vue 中动态绑定class 和 style的方法代码详解
2018/06/01 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[47:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
处理Python中的URLError异常的方法
2015/04/30 Python
python自动12306抢票软件实现代码
2018/02/24 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python字典中的键映射多个值的方法(列表或者集合)
2018/10/17 Python
IGK Hair官网:喷雾、洗发水、护发素等
2020/11/03 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
护士岗位职责
2014/02/16 职场文书
安全生产月活动总结
2014/05/04 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2015年幼儿园教研活动总结
2015/03/25 职场文书
求职自我评价参考范文
2019/05/16 职场文书
iPhone13 Pro外观确定,升级4800万镜头,4月20日发新品
2021/04/15 数码科技