模拟网站品牌列表的效果
模拟网站品牌列表的效果
说明:用户可以单击商品列表下方的“显示全部品牌”按钮来显示全部的品牌。
为射阳等地区用户提供了全套网页设计制作服务,及射阳网站建设行业解决方案。主营业务为网站制作、网站建设、射阳网站设计,以传统方式定制建设网站,并提供域名空间备案等一条龙服务,秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求,就会得到认可,从而选择与我们长期合作。这样,我们也可以走得更远!
单击“显示全部品牌”按钮的同时,列表会将推荐的品牌的名字高这显示,按钮里的文字也换成“精简显示品牌”
附图:
<------------------------------------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; //超链接不跳转
});
});
<--------------------------------CSS代码----------------------------------------->
<-----------------------------------HTML代码------------------------------------>
分享文章:模拟网站品牌列表的效果
本文来源:http://pwwzsj.com/article/gipgso.html