JS基础——选项卡列表显示隐藏缩略图(函数传参)
2015-11-27 16:36
537 查看
CSS部分:
JS部分:
*{ 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]); } };预览效果:
相关文章推荐
- 用js实现时间效果
- 类似电话本字符索引的JS简单实现
- js基础——图片切换实例(函数传参)
- javascript 回调函数应用
- 【JavaScript】this关键字详解
- json对象load到表单中,这样后台Ajax过来的数据就可以直接加载
- js获取URL参数
- 10个优秀的Javascript的音频库
- 解决js和其他库$全局变量冲突
- jsonp解决js跨域问题
- JSP/SERVLET入门教程--Servlet 使用入门
- js 数组和对象
- js字符串转json
- JavaScript DOM学习总结(二)
- javascript 设计模式实践之策略模式--输入验证
- JavaScript DOM学习总结(二)
- js面向对象oop编程
- Sublime Text插件:HTML+CSS+JAVASCRIPT+JSON快速格式化
- js模块化开发——AMD规范
- js模块化开发——模块的写法