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

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

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

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

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

附圖：

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

 

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

 

<------------------------------------Jquery代碼-------------------------------->

 

<script type="text/javascript">

$(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)

});

});

</script>

 

 

<--------------------------------CSS代碼----------------------------------------->

 

<style type="text/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>

<div class="SubCategoryBox">

<ul>

    <li><a href="#">佳能</a><i>(30440)</i></li>

     <li><a href="#">索尼</a><i>(30440)</i></li>

    <li><a href="#">三星</a><i>(30440)</i></li>

    <li><a href="#">卡西歐</a><i>(30440)</i></li>

<li><a href="#">富士</a><i>(30440)</i></li>

        <li><a href="#">柯達</a><i>(30440)</i></li>

        <li><a href="#">擯得</a><i>(30440)</i></li>

        <li><a href="#">理光</a><i>(30440)</i></li>

        <li><a href="#">噢林巴斯</a><i>(30440)</i></li>

        <li><a href="#">明基</a><i>(30440)</i></li>

        <li><a href="#">愛國者</a><i>(30440)</i></li>

        <li><a href="#">其他</a><i>(30440)</i></li>

</ul>

<div class="showmore">

<a href="區(qū)域隱藏.html"><span>顯示全部品牌</span></a>

</div>

</div>


</body>

 

 

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

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

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

廣告

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

h5響應式網(wǎng)站建設