jQuery学习笔记——jQuery选择器练习

	
		
		
		 
		
		
		
	
	
		

			

				
佳能(30440) 
				
索尼(27220) 
				
三星(20808) 
				
尼康(17821) 
				
松下(12289) 
				
卡西欧(8242) 
				
富士(14894) 
				
柯达(9520) 
				
宾得(2195) 
				
理光(4114) 
				
奥林巴斯(12205) 
				
明基(1466) 
				
爱国者(3091) 
				
其它品牌相机(7275) 
			
			

				显示全部品牌
			
		
	

default.css

* {
	margin: 0;
	padding: 0;
}

body {
	font-size: 12px;
	text-align: center;
}

a {
	color: #04D;
	text-decoration: none;
}

a:hover {
	color: #F50;
	text-decoration: underline;
}

.SubCategoryBox {
	width: 600px;
	margin: 0 auto;
	text-align: center;
	margin-top: 40px;
}

.SubCategoryBox ul {
	list-style: none;
}

.SubCategoryBox ul li {
	display: block;
	float: left;
	width: 200px;
	line-height: 20px;
}

.showmore {
	clear: both;
	text-align: center;
	padding-top: 10px;
}

.showmore a {
	display: block;
	width: 120px;
	margin: 0 auto;
	line-height: 24px;
	border: 1px solid #AAA;
}

.showmore a span {
	padding-left: 15px;
	background: url(../img/down.gif) no-repeat 0 0;
}

.promoted a {
	color: #F50;
}

运行结果：

单击显示全部品牌

点击精简显示品牌后，恢复到第一张图