jQuery仿淘宝网产品品牌隐藏与显示效果
更新时间：2015年09月01日 17:42:15 作者：企鹅
这篇文章主要介绍了jQuery仿淘宝网产品品牌隐藏与显示效果,通过jquery鼠标事件实现页面元素的显示与隐藏功能,非常具有实用价值,需要的朋友可以参考下
本文实例讲述了jQuery仿淘宝网产品品牌隐藏与显示效果。分享给大家供大家参考。具体如下：
这里演示jQuery实现产品品牌隐藏与显示效果，仿淘宝网商品列表的品牌显示与折叠功能，很实用的代码，看了就知道了。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/jquery-f-taobao-product-hidden-show-codes/
具体代码如下：
<!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程序设计有所帮助。
相关文章
这篇文章主要介绍了jQuery操作input值的各种方法总结，有需要的朋友可以参考一下2013-11-11
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
Web开发进行页面跳转时在pageB中引用的JS并未成功运行，针对这个问题本文给予了详细的解决方法，感兴趣的你可以参考下哈，希望可以帮助到你2013-03-03
这篇文章主要介绍了jQuery中next()方法用法,实例分析了next()方法的功能、定义及获得匹配元素集合中每个元素紧邻的同辈元素使用技巧,需要的朋友可以参考下2015-01-01![基于jquery的lazy loader插件实现图片的延迟加载[简单使用]](//img.jbzj.com/images/xgimg/bcimg3.png)
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
当网站上有大量图片要展示的话，如果一次把所有的图片都加载出来的话，这势必会影响网站的加载速度，给用户带来比较差的体验。2011-05-05
这篇文章主要介绍了JQuery动画animate的stop方法使用,需要的朋友可以参考下2014-05-05
jQuery实例—选项卡的简单实现(js源码和jQuery)
下面小编就为大家带来一篇jQuery实例—选项卡的简单实现(js源码和jQuery) 。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
这篇文章主要介绍了jQuery插件imgPreviewQs实现上传图片预览的相关资料,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jquery控制display属性为none或block,需要的朋友可以参考下2014-03-03
今天自己写了个轻量级的三级展开菜单，如果需要可以在增加一级别，一般公司的项目三级都足够了。2011-04-04
本文重点个大家讲解了几个jQuery中ajax的load()方法的使用实例，load()方法是jQuery中最为简单和常用的Ajax方法，能远程载入HTML代码并插入DOM中2015-01-01
![基于jquery的lazy loader插件实现图片的延迟加载[简单使用]](http://img.jbzj.com/images/xgimg/bcimg3.png)
最新评论