模擬網(wǎng)站品牌列表的效果

說明：用戶可以單擊商品列表下方的“顯示全部品牌”按鈕來顯示全部的品牌。

為射陽等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及射陽網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為網(wǎng)站制作、網(wǎng)站建設、射陽網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

單擊“顯示全部品牌”按鈕的同時，列表會將推薦的品牌的名字高這顯示，按鈕里的文字也換成“精簡顯示品牌”

附圖：

模擬網(wǎng)站品牌列表的效果

<------------------------------------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="區(qū)域隱藏.html"><span>顯示全部品牌</span></a>

</div>

</body>

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

網(wǎng)站題目：模擬網(wǎng)站品牌列表的效果
標題URL：http://aaarwkj.com/article30/gipgso.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿建站、移動網(wǎng)站建設、網(wǎng)站改版、網(wǎng)站制作、電子商務、網(wǎng)站建設

聲明：本網(wǎng)站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

模擬網(wǎng)站品牌列表的效果

模擬網(wǎng)站品牌列表的效果