1. 程式人生 > >JS基礎——選項卡列表顯示隱藏縮圖(函式傳參)

JS基礎——選項卡列表顯示隱藏縮圖(函式傳參)

CSS部分:

*{ padding: 0; margin: 0;}
	li{ list-style: none; font-size: 12px;}
	a{ text-decoration: none; color: #333;}
	img{ border: none; vertical-align: top;}
	.clearfix{ zoom: 1; }
	.clearfix:after{ clear: both; display: block; content: ""; visibility: hidden; height: 0; }
	#tab{ width: 301px; margin: 20px auto; }
	.tab-bt{ border-top: 2px solid #206F96; border-left: 1px solid #ccc;  height: 30px; line-height: 30px;}
	.tab-bt li{ width: 99px; float: left; text-align: center;  background: #eee; border-right: 1px solid #ccc; font-size: 14px;}
	.tab-bt li a{ display: block;}
	.tab-bt li a.active{ background: #fff;}
	.tab-nr{ display: none;}
	.tab-nr2{ display: none;}
	.tab-nr1{ padding: 15px 10px 0; font-size: 14px;}
	.tab-nr1 a:hover{ color: red; text-decoration: underline;}
	.tab-nr2{ padding: 10px;}
HTML部分:
<div id="tab">
		<ul class="tab-bt">
			<li><a class="active" href="#">選項1</a></li>
			<li><a href="#">選項2</a></li>
			<li><a href="#">選項3</a></li>
		</ul>
		<ul class="tab-nr" style="display:block;">
			<li>
				<div class="tab-nr1">
					<a href="#">1標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>1標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">1標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>1標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">1標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>1標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">1標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>1標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">1標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>1標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">1標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>1標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
		</ul>
		
		<ul class="tab-nr">
			<li>
				<div class="tab-nr1" style="display:none;">
					<a href="#">2標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2" style="display:block;">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>2標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">2標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>2標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">2標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>2標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">2標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>2標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">2標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>2標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">2標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>2標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
		</ul>
		<ul class="tab-nr">
			<li>
				<div class="tab-nr1" style="display:none;">
					<a href="#">3標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2" style="display:block;">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>3標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">3標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>3標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">3標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>3標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">3標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>3標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">3標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>3標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
			<li>
				<div class="tab-nr1">
					<a href="#">3標題文字部分,不顯示圖片</a>
				</div>
				<div class="tab-nr2">
					<a href="#">
						<img src="img/thumbnail.jpg" alt="" />
						<strong>3標題文字部分,不顯示圖片</strong>
					</a>
				</div>
			</li>
		</ul>
	</div>


JS部分:
// 封裝class函式	
	function getByClass(oParent,sClass){
		var arr = [];
		var aElement = oParent.getElementsByTagName('*');
		for(var i = 0; i<aElement.length; i++){
			if(aElement[i].className == sClass){
				arr.push(aElement[i]);
			}
		}
		return arr;
	};

	window.onload = function(){
		// 獲取元素
		var oDiv = document.getElementById('tab');
		var oTabUl_bt = getByClass(oDiv,'tab-bt')[0];
		var aATab_bt = oTabUl_bt.getElementsByTagName('a');
		var aTab_nr = getByClass(oDiv,'tab-nr');

		// 選項卡切換
		for(var i = 0; i<aATab_bt.length; i++){
			aATab_bt[i].index = i;
			aATab_bt[i].onmouseover = function(){
				for(var i = 0; i<aATab_bt.length; i++){
					aATab_bt[i].className = '';
					aTab_nr[i].style.display = 'none';
				}
				aATab_bt[this.index].className = 'active';
				aTab_nr[this.index].style.display = 'block';
			};
		}

		// 顯示隱藏縮圖(函式傳參)
		function tabDetail(oTabUl){
			var aLi = oTabUl.getElementsByTagName('li');	
			for(var i = 0; i<aLi.length; i++){
				aLi[i].onmouseover = function(){
					var oTab_nr1 = getByClass(this,'tab-nr1')[0];
					var oTab_nr2 = getByClass(this,'tab-nr2')[0];
					oTab_nr1.style.display = 'none';
					oTab_nr2.style.display = 'block';
				};
				aLi[i].onmouseout = function(){
					var oTab_nr1 = getByClass(this,'tab-nr1')[0];
					var oTab_nr2 = getByClass(this,'tab-nr2')[0];
					oTab_nr1.style.display = 'block';
					oTab_nr2.style.display = 'none';
				};
			}
		};
		
		/*tabDetail(aTab_nr[0]);
		tabDetail(aTab_nr[1]);
		tabDetail(aTab_nr[2]);*/

		for(var i = 0; i<aTab_nr.length; i++){
			tabDetail(aTab_nr[i]);
		}
	};
預覽效果: