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的数据封装的 ...
随机推荐
- Sql语句中关于如何在like '%?%'中给？赋值
做模糊查询用户的时候,如果 String sql="select * from users where name like %?%"; String[] param={userna ...
- 用xshell5连接虚拟机，显示Could not connect to '192.168.3.128' (port 22): Connection failed.
原因:虚拟机上没有安装或者没有启动ssh 解决: 1.安装sshserver sudo apt-get install openssh-server 2.启动ssh服务 sudo service ss ...
- Nginx 源码
http://blog.sina.com.cn/s/articlelist_1834459124_1_1.html http://tengine.taobao.org/book/ https://gi ...
- 万能存储工具类SDCard存储 /data/data/存储 assets存储 raw存储
万能存储工具类 SDCard存储 /data/data/存储 assets存储 raw存储 粘贴过去就能够用了 <uses-permission android:name="and ...
- css3 字体自适应
css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等. “viewpoint” = window size vw = 1% of viewport width 1vh = 1% ...
- 对话DDM：分布式数据库中间件全解析
进入云计算时代,传统的数据库在性能和容量等方面已无法满足企业的要求,随着数据量的不断骤增,易于扩展.拆分的数据库解决方案对于企业的云化转型更是显得尤为重要.为使企业应用上云更简单,分布式数据库中间件D ...
- samba访问其他服务器文件权限设置
chown lynn.feng:lynn.feng nelson/ 我们知道档案权限对于一个系统的安全重要性,也知道档案的权限对于使用者与群组的相关性, 那如何修改一个档案的属性与权限呢? 我们这里介 ...
- Git下的冲突解决【转】
本文转载自:http://www.cnblogs.com/sinojelly/archive/2011/08/07/2130172.html 冲突的产生 很多命令都可能出现冲突,但从根本上来讲,都是m ...
- loj 102 最小费用流
补一发费用流的代码 %%%棒神 #include<iostream> #include<cstdio> #include<cstring> #include< ...
- B1007 [HNOI2008]水平可见直线 几何
其实就是一道很简单的栈,只要明白什么情况会被挡住就行了.假如斜率一样则下面的被挡住,假如不一样就算交点,看那个交点在上面就行了. 题干: Description 在xoy直角坐标平面上有n条直线L1, ...