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 相关文章推荐
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
jquery实现ajax提交form表单的方法总结
Mar 03 Javascript
jquery获得当前html页面源码的方法
Jul 14 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
关于vue-resource报错450的解决方案
Jul 24 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
vue项目中使用vue-i18n报错的解决方法
Jan 13 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
vue实现路由切换改变title功能
May 28 Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 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
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP中file_get_contents函数抓取https地址出错的解决方法(两种方法)
2015/09/22 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
ajaxControlToolkit AutoCompleteExtender的用法
2008/10/30 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
javascript if条件判断方法小结
2014/05/17 Javascript
JavaScript中计算网页中某个元素的位置
2015/06/10 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
javascript实现延时显示提示框特效代码
2016/04/27 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
Python(Tornado)模拟登录小米抢手机
2013/11/12 Python
Python解析最简单的验证码
2016/01/07 Python
python学生管理系统代码实现
2020/04/05 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
解决pip install psycopg2出错问题
2020/07/09 Python
html5通过postMessage进行跨域通信的方法
2017/12/04 HTML / CSS
Lookfantastic希腊官网:英国知名美妆购物网站
2018/09/15 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
两道JAVA笔试题
2016/09/14 面试题
档案接收函范文
2014/01/10 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书
导游词之广州陈家祠
2019/10/21 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript