JS基础——选项卡列表显示隐藏缩略图(函数传参)
2024-05-07 08:54:01
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]);}};预览效果：
JS基础——选项卡列表显示隐藏缩略图(函数传参)相关推荐
- JS一起学02：函数传参、操作属性第二种方式、提取行间事件、循环、this、焦点问题、联动选择、选项卡焦点图
一.函数传参 1.函数传参:参数就是占位符----函数里定不下来的东西 var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 ...
- JS一起学05：Date对象、封闭空间、函数传参和封装、获取非行间样式、字符串操作
一.Date对象 1. 获取 oDate.getFullYear() 获取年份 oDate.getMonth()+1 获取月份 0-11----->1-12 oDate.getDate() 获 ...
- JS函数传参时:值传递与引用传递的区别
JS函数传参时:值传递与引用传递的区别 一.先分析基础数据与复杂数据的区别 : 基本数据类型:Undefined.Null.Boolean.Number.String 引用数据类型:对象 如:var ...
- Python基础day05【函数（函数传参的两种形式、函数形参）、拆包、引用、可变与不可变类型、引用做函数参数注意点】
视频.源码.课件.软件.笔记:超全面Python基础入门教程[十天课程]博客笔记汇总表[黑马程序员] 目录 0.复习 1.函数传参的两种形式[掌握] 2.函数形参 2.1.缺省参数(默认参数) ...
- 论JS函数传参时:值传递与引用传递的区别
JS函数传参时:值传递与引用传递的区别? 值传递:值传递的数据为基本数据类型,基本数据类型在内存中存放的是数值本身:值传递为单向传递,只能由实参传递给形参. 引用传递:引用传递的数据为复杂数据类型,复 ...
- 函数传参之商品价格计算—JS学习笔记2015-6-6（第50天）
经常我们可以看到很多网站会有多个相同功能的模块,比如淘宝首页的轮播,比如新浪首页的tab切换: 那么可以看出这些地方在HTML结构上是类似的,所以我们可以考虑用一块功能代码去实现,而不同是仅仅是传递参 ...
- JS中函数传参按照值传递
ES语法中所有函数的参数都是按值传递的. 探讨函数参数按值传递问题: //1.参数被赋值为原始值 function add(num){num += 10;return num; } let count ...
- Javascript 之《函数传参到底是值传递还是引用传递》
前言 这个问题其实困惑了我好久,但是在实际使用中总是得过且过,不想去深究.由于这种态度,在学习 Javascript 过程中,水平一直都是出于半桶水状态,很多概念和原理似懂非懂,模糊不清. 所以,写了 ...
- 事件——事件绑定||事件函数传参||事件修饰符||按键修饰符||自定义按键修饰符
事件绑定 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
- 微信小程序函数传参以及获取调用
最近在做微信小程序,发现小程序的页面函数传参和web端不一样,在此做个记录: 1.web端函数传参是这样的 <Buttontype="primary"className=&q ...
最新文章
- 关于 android 加载 res 图片 out of memory 问题 解决 同样适用于 sd卡图片
- linux curl 使用详解 常见应用
- mybatis的实际应用
- mysql hang住_mysql 5.7不定期的hang住重启-问答-阿里云开发者社区-阿里云
- 【Spring Boot 实战开发】第2讲 Kotlin类型系统与空安全
- 路由协议：RIP/OSPF/BGP—Vecloud微云
- springboot 配置DRUID数据源
- Python--切片学习记录
- Perl 之 use(), require(), do(), %INC and @INC
- python发送包含html、图片、附件和链接的邮件
- 网易云音乐失去韩国SM旗下歌曲版权 歌曲下架歌单变灰
- mac mysql客户端工具 知乎_Mac OS X 平台上有哪些好用且免费的MySQL客户端工具？
- 推荐一个比较好的游戏源码下载网站
- RPL(7)：RFC6550翻译(7)---Upward Routes
- 华硕和兰博基尼将发布iPhone的对手
- Allegro通孔焊盘制作
- （转）WorldQuant ：如何缔造量化金融王国
- Python写违章扣分程序
- Spring Security 视频教程
- 基于Java毕业设计新型冠状病毒防控咨询网站2020源码+系统+mysql+lw文档+部署软件