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的数据封装的 ...
随机推荐
- mac os随笔
1.定义对象的成员变量的时候以便使用下划线开头:例如NSImage *_image; NSURL的一个函数: getResourceValue:forKey:error: Returns t ...
- Android: 帮助找出内存泄漏的工具
1. Intellij Idea的Memory Monitor 通过Memory Monitor,我们可以知道哪个页面哪些操作会占用比较多的内存.如果需要更详细的信息,可以导出heap,通过MAT来分 ...
- lua中的闭包小结
function newCounter() return function() i=i+ return i end end c1=newCounter() print(c1()) print(c1() ...
- 1.4－动态路由协议OSPF③
OSPF的路由汇总 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 用默认的网络地址 因为 无论在何种路 ...
- Oracle移除表空间的数据文件 ora-00604 ora-01426
项目背景:在之前开发环境数据库管理比較乱,在表空间不足时仅仅是加入数据文件,測试完后数据己删除,但数据库表空间所占的空间不能回收,导致数据库的存储文件夹使用率达到97%以上实际使用仅仅有10%, ...
- Datazen自己定义地图
Datazen的地图数据定义主要以ESRI的Shape文件格式为主,这是现现在被广泛使用的一种地图数据格式.在Datazen中,自己定义地图须要提供例如以下两个地图数据定义文件: SHP文件提供 ...
- Codeforces Round #327 (Div. 2)C. Median Smoothing 构造
C. Median Smoothing A schoolboy named Vasya loves reading books on programming and mathematics. He ...
- ubuntu16.04下配置静态ip
ubuntu下配置静态ip 1.先获取ip基本信息 ifconfig enp3s0 Link encap:以太网 硬件地址 2c:4d:54:65:de:6e inet 地址:192.168.199. ...
- poj 2104 K-th Number 主席树+超级详细解释
poj 2104 K-th Number 主席树+超级详细解释 传送门:K-th Number 题目大意:给出一段数列,让你求[L,R]区间内第几大的数字! 在这里先介绍一下主席树! 如果想了解什么是 ...
- 【POJ 3714】 Raid
[题目链接] http://poj.org/problem?id=3714 [算法] 分治求平面最近点对 [代码] #include <algorithm> #include <bi ...