模拟网站品牌列表的效果

说明：用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。

为射阳等地区用户提供了全套网页设计制作服务，及射阳网站建设行业解决方案。主营业务为网站制作、网站建设、射阳网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

单击“显示全部品牌”按钮的同时，列表会将推荐的品牌的名字高这显示，按钮里的文字也换成“精简显示品牌”

附图：

模拟网站品牌列表的效果

<------------------------------------Jquery代码-------------------------------->

$(document).ready(function(){ //等待DOM加载完毕

var $category = $('ul li:gt(5):not(:last)'); //获得索引值大于5的品牌集合（除最后一条）

$category.hide(); //隐藏上面获取到的JQuery对象

var $toggleBtn = $('div.showmore > a'); //获取“显示全部品牌”按钮

$toggleBtn.click(function(){ //给按钮添加onclick事件

if($category.is(":visible")){ //如果元素显示

$category.hide(); //隐藏$category

$('.showmore a span')

.css("background-color","#ccc")

.text("显示全部品牌"); //改变背景图片和文本

$('ul li').removerClass("promoted");//去掉高亮样式

}else{

$category.show(); //显示 $category

$('.showmore a span')

.css("background-color","#fff")

.css("border","1px solid #999")

.text("精简显示品牌"); //改变背景图片和文本

$('ul li').filter(":contains('佳能'),:contains('尼康'),:contains('噢林巴斯')")

.addClass("promoted"); //添加高亮样式

}

return false; //超链接不跳转

});

</script>

<--------------------------------CSS代码----------------------------------------->

<!--

ul{

padding:0px;

margin:0px 0px 0px 0px;

list-style:none;

}

ul li{

color: #000000;

text-decoration: none;

display:block;

width:300px;

float:left;

margin-top: 10px;

text-align: center;

}

.SubCategoryBox .showmore {

clear:both;

margin-right: auto;

margin-left: auto;

text-align:center;

height:50px;

line-height:50px;

margin-top: 20px;

}

.SubCategoryBox .showmore span{

display:block;

border:1px solid #ccc;

width:100px;

height:40px;

}

.SubCategoryBox .showmore span a{

text-decoration:none;

display:block;

color:#000;

}

.SubCategoryBox .showmore span a:hover{

color:#FF0000;

}

.SubCategoryBox {

width: 900px;

margin-top: 20px;

margin-right: auto;

margin-left: auto;

font-size: 14px;

font-family: Arial, "黑体";

border: 1px solid #FF6600;

}

-->

</style>

<-----------------------------------HTML代码------------------------------------>

<body>

<ul>

</ul>

<a href="区域隐藏.html"><span>显示全部品牌</span></a>

</div>

</body>

附件：http://down.51cto.com/data/2361088

网站题目：模拟网站品牌列表的效果
标题URL：https://www.cdcxhl.com/article30/gipgso.html

成都网站建设公司_创新互联，为您提供外贸建站、移动网站建设、网站改版、网站制作、电子商务、网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容