說明:用戶可以單擊商品列表下方的“顯示全部品牌”按鈕來顯示全部的品牌。
為射陽等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù),及射陽網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為網(wǎng)站制作、網(wǎng)站建設(shè)、射陽網(wǎng)站設(shè)計,以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求,就會得到認(rèn)可,從而選擇與我們長期合作。這樣,我們也可以走得更遠(yuǎn)!
單擊“顯示全部品牌”按鈕的同時,列表會將推薦的品牌的名字高這顯示,按鈕里的文字也換成“精簡顯示品牌”
附圖:
<------------------------------------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; //超鏈接不跳轉(zhuǎn)
});
});
<--------------------------------CSS代碼----------------------------------------->
<-----------------------------------HTML代碼------------------------------------>