JS——tab函数封装
1、为li标签添加index属性，这个属性正好就是span标签数组的index值
2、函数封装适合页面有多个tab切换，需要注意的在获取的li标签和span标签对象时，必须将对应div对象作为参数传入
li标签添加index属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .box1 {
width: 500px;
height: 400px;
border: 1px solid #b6ff00;
overflow: hidden;
margin: 100px auto;
} ul {
width: 510px;
height: 40px;
list-style: none;
} li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 400 15px/40px "simsun";
background-color: beige;
cursor: pointer;
} span {
display: none;
width: 500px;
height: 360px;
background-color: #ffd800;
text-align: center;
font: 700 150px/360px "simsun";
} .current {
background-color: #ffd800;
} .show {
display: block;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>鞋子</li>
<li>上衣</li>
<li>下装</li>
<li>棉衣</li>
<li>夏装</li>
</ul>
<span>鞋子</span>
<span>上衣</span>
<span>下装</span>
<span>棉衣</span>
<span>夏装</span>
</div>
<script>
var lis = document.getElementsByTagName("li");
var sps = document.getElementsByTagName("span");
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onmouseover = function () {
for (var j = 0; j < lis.length; j++) {
lis[j].className = "";
sps[j].className = "";
}
this.className = "current";
sps[this.index].className = "show";
}
}
</script>
</body>
</html>
函数封装版本
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
} .box {
width: 500px;
height: 400px;
border: 1px solid #b6ff00;
overflow: hidden;
margin: 100px auto;
} ul {
width: 510px;
height: 40px;
list-style: none;
} li {
float: left;
width: 101px;
height: 40px;
text-align: center;
font: 400 15px/40px "simsun";
background-color: beige;
cursor: pointer;
} span {
display: none;
width: 500px;
height: 360px;
background-color: #ffd800;
text-align: center;
font: 700 150px/360px "simsun";
} .current {
background-color: #ffd800;
} .show {
display: block;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>鞋子</li>
<li>上衣</li>
<li>下装</li>
<li>棉衣</li>
<li>夏装</li>
</ul>
<span>鞋子</span>
<span>上衣</span>
<span>下装</span>
<span>棉衣</span>
<span>夏装</span>
</div>
<div class="box">
<ul>
<li>鞋子</li>
<li>上衣</li>
<li>下装</li>
<li>棉衣</li>
<li>夏装</li>
</ul>
<span>鞋子</span>
<span>上衣</span>
<span>下装</span>
<span>棉衣</span>
<span>夏装</span>
</div>
<div class="box">
<ul>
<li>鞋子</li>
<li>上衣</li>
<li>下装</li>
<li>棉衣</li>
<li>夏装</li>
</ul>
<span>鞋子</span>
<span>上衣</span>
<span>下装</span>
<span>棉衣</span>
<span>夏装</span>
</div>
<script>
var boxs = document.getElementsByClassName("box");
for (var i = 0; i < boxs.length; i++) {
tabSwitch(boxs[i]);
}
function tabSwitch(ele) {
var lis = ele.getElementsByTagName("li");
var sps = ele.getElementsByTagName("span");
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onmouseover = function () {
for (var j = 0; j < lis.length; j++) {
lis[j].className = "";
sps[j].className = "";
}
this.className = "current";
sps[this.index].className = "show";
}
}
}
</script>
</body>
</html>
JS——tab函数封装的更多相关文章
- JS 抖动函数封装
原生JS实现封装的抖动函数框架 <style> ul{ margin-top: 100px; } li { float: left; margin-left: 20px; position ...
- js 时间函数封装
html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- 兼容主流浏览器的js原生函数封装
1.获取和修改垂直滚动条的滚动距离 //获取滚动条滚动距离function getScrollTop(){ var fromTop=document.documentElement.scrollTop ...
- js getByClass函数封装
function getByClass(oParent, sClass) { var aEle=oParent.getElementsByTagName('*'); var aResult=[]; v ...
- js继承函数封装
function extend(subClass,superClass) { //初始化一个中间空对象,为了转换主父类关系 var F = function() {}; F.prototype = s ...
- 前端总结·基础篇·JS（三）arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
- JS中深浅拷贝 函数封装代码
一.了解 基本数据类型保存在栈内存中,按值访问,引用数据类型保存在堆内存中,按址访问. 二.浅拷贝 浅拷贝只是复制了指向某个对象的指针,而不是复制对象本身,新旧对象其实是同一内存地址的数据,修改其中一 ...
- react request.js 函数封装
1.request.js 函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from ...
- js cookie创建读取删除函数封装
js cookie创建读取删除函数封装 一.总结 都是为了方便操作,这样弄了很方便 1.创建cookie的函数封装的作用:方便设置过期时间expire,方便设置键和值 2.查询cookie的数据封装的 ...
随机推荐
- 轰炸III
题目背景 一个大小为N*M的城市遭到了X次轰炸,每次都炸了一个每条边都与边界平行的矩形. 题目描述 在轰炸后,有Y个关键点,指挥官想知道,它们有没有受到过轰炸,如果有,被炸了几次,最后一次是第几轮. ...
- JAVA之中出现无法加载主类的情况解决方法
j今天打代码的时候出现了无法加载主类的情况,我就收集了一些,java无法加载主类的方法 ava无法加载主类解决办法 今天启动项目,又遇到找不到或无法加载主类的情况,清除项目后无法编译,class文件下 ...
- Mysql修改自增主键的起始值及查询自增主键的下一个值
MySQL [xxx_mall]> alter table shop_base_info AUTO_INCREMENT=11000;Query OK, 0 rows affected (0.0 ...
- ADO连接ACCESS2007及以上版本的数据库
function getaccessstr(databasename:string;password:string;accessVer:string='access2003'):string; beg ...
- 异常：”未处理System.TypeLoadException“
1.问题由来: 在敲系统时原来的已有的类都能正常的执行,可是当加入一个新的实体类CancelCard的时候系统执行时显示错误例如以下: watermark/2/text/aHR0cDovL2J ...
- hadoop-2.6.0 Unhealthy Nodes 问题
近期安装hadoop-2.6.0集群时,打开8088页面,查看集群信息,看到集群出现Unhealthy Nodes 的问题,点击该处.会展开Unhealthy Nodes 的情况,这时会看到Healt ...
- zoj 1880 - Tug of War
题目:有n个人分成两组,两组人数差不能超过1,找到两组的人重量之差的最小值. 分析:dp,二维01背包. 由于必须放在两个组中的一组,直接背包全部可到状态, 取出相差不超过 1的最接近 sum/2的值 ...
- 11082 完全二叉树的种类 O(n) 卡特兰数
11082 完全二叉树的种类 时间限制:800MS 内存限制:1000K提交次数:0 通过次数:0 题型: 编程题 语言: G++;GCC;VC Description 构造n个(2<=n ...
- Java读取数据库数据生成柱状图
此案例是用swing显示数据的.须要引入jfreechart相关包.不同版本号可能包不同样.本人用的是 此案例在ssi框架下会报错,不用框架就没问题. Java后台逻辑代码: public class ...
- 在Linux上配置DRBD部署
drbd 工作原理DRBD是一种块设备,能够被用于高可用(HA)之中.它相似于一个网络RAID-1功能.当你将数据写入本地 文件系统时,数据还将会被发送到网络中还有一台主机上.以同样的形式记录在一个文 ...