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

网络编程 2024/11/20 佚名

3 2 1

本文实例讲述了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="/UploadFiles/2021-04-02/jquery-1.6.2.min.js">

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

jQuery,仿淘宝网,产品品牌,隐藏,显示