<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS基础——选项卡列表显示隐藏缩略图(函数传参)</title>
<style>
*{ 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;}
</style>
<script>
// 封装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]);
}
};
</script>
</head>
<body>
<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>
</body>
</html>
