js实现选项卡切换的三种方式
前两种主要实现一个选项卡的切换，第三种使用闭包看书，构造函数实现多个选项卡的切换：
1.第一种实现实现效果为：
实现代码为：
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>tab切换</title>
<style type="text/css">
* {
font: normal 15px "微软雅黑";
color: #000;
} ul {
list-style-type: none;
padding-left: 5px;
margin-bottom: -2px
} a {
text-decoration: none;
} p {
display: block;
margin: 10px
} li {
display: inline-block;
border: 1px solid #999;
border-bottom: 2px solid #a00;
background: #fff;
text-align: center;
width: 60px;
height: 30px;
margin: 0 1px;
line-height: 30px
} ul .active {
border-top: 2px solid #a00;
border-bottom: 2px solid #fff;
} #content {
margin: 0;
border: 1px solid #ccc;
border-top: 2px solid #a00;
width: 300px
} #content div {
display: none
} #content .active {
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li name="a" onclick="tab(this)" class="active"><a href="#">房产</a></li>
<li name="a" onclick="tab(this)"><a href="#">家居</a></li>
<li name="a" onclick="tab(this)"><a href="#">二手房</a></li>
</ul>
<div id="content">
<div class="active" name="con">
<p>20jf钢带机额戴鸿慈贷款放款l</p> <p>20jf钢带机额戴鸿慈贷款放款l</p> <p>20jf钢带机额戴鸿慈贷款放款l</p>
</div>
<div name="con">
<p>nvmllllmlddnlv来的都来l</p> <p>戴绿帽没vvmdslnv</p> <p>的女凯迪拉克vk</p>
</div>
<div name="con">
<p>发V</p> <p>叉路口积分卡很多可没</p> <p>奉公如法</p>
</div>
</div>
</div>
<script type="text/javascript"> var li_arr = document.getElementsByTagName("li");
var div_arr = document.getElementsByName("con");
var len = li_arr.length; function tab(obj) {
for (var i = 0; i < len; i++) {
if (li_arr[i] == obj) {
li_arr[i].setAttribute("class", "active");
div_arr[i].setAttribute("class", "active");
} else {
li_arr[i].setAttribute("class", "");
div_arr[i].setAttribute("class", "");
}
}
}
</script>
</body>
</html>
2.第二种实现效果为：
主要实现代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding: 0; margin: 0; box-sizing: border-box}
div{ width: 70%; margin: 100px auto}
ul{list-style: none; overflow: hidden}
.tabs li{
float: left;
width: 100px;
text-align: center;
line-height: 30px;
background: #f60;
border: 1px solid #f60;
border-bottom: none;
cursor: pointer;
}
.tabs li:hover{
background: #fff;
}
.tabs li.active{
background: #fff;
}
.content{
position: relative;
width: 400px;
height: 300px;
border: 1px solid #f60;
border-top: none;
}
.content li{
width: 100%;
height: 100%;
position: absolute;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<div>
<ul class="tabs" id="tabs">
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
<ul class="content" id="content">
<li style="display: block">内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div> <script>
// 普通方法实现一个选项卡切换
var tabs =document.getElementById("tabs");
var tablist = tabs.children;
var content =document.getElementById("content");
var conlist = content.children; for(i=0;i<tablist.length; i++){
tablist[i].index = i; // tablist[i]增加index属性 ，属性值为该项的下标
tablist[i].onclick = function(){
for(j=0;j<conlist.length;j++){
tablist[j].className ="";
conlist[j].style.display = "none";
}
this.className = "active";
conlist[this.index].style.display = "block";
}
} </script>
</body>
</html>
3. 第三种实现效果为：
在第二种实现方式的基础上,实现多个选项卡的切换，使用了闭包函数
主要实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
} div {
margin: 100px;
} ul {
list-style: none;
overflow: hidden;
} .tabs li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
border: 1px solid fuchsia;
background: salmon;
border-bottom: none;
cursor: pointer;
} .tabs li.active {
background: beige
} .content {
position: relative;
width: 400px;
height: 300px;
border: 1px solid fuchsia;
border-top: none;
} .content li {
width: 100%;
height: 100%;
position: absolute;
display: none;
padding: 170px;
}
</style>
</head>
<body>
<div>
<ul class="tabs" id="tab1">
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
<ul class="content" id="content1">
<li style="display: block">内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
<div>
<ul class="tabs" id="tab2">
<li class="active">选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
<ul class="content" id="content2">
<li style="display: block">内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
</div>
<script>
function tab(tabid, contentid){
var tabul = document.getElementById(tabid);
var tablists = tabul.getElementsByTagName("li");
var contentul = document.getElementById(contentid);
var conlists = contentul.getElementsByTagName("li");
for(i=0;i<tablists.length; i++){
tablists[i].onclick = function(i){ //闭包函数
return function (){
for(j=0;j<conlists.length;j++){
tablists[j].className ="";
conlists[j].style.display = "none";
}
this.className = "active";
conlists[i].style.display = "block";
}
}(i);
}
}
tab("tab1", "content1");
tab("tab2", "content2");
</script>
</body>
</html>
js实现选项卡切换的三种方式的更多相关文章
- 【百度地图API】关于如何进行城市切换的三种方式
原文:[百度地图API]关于如何进行城市切换的三种方式 摘要:本文介绍了三种切换城市的方式:查询城市.城市列表和显示城市轮廓. ------------------------------------ ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JS弹出对话框的三种方式
JS弹出对话框的三种方式 我们用到了alert()方法.prompt()方法.prompt()方法,都是在网页有一个弹出框,那么就让我们探究一下他们之间的区别: 一.第一种:alert()方法 < ...
- js对象实例化的常见三种方式
三种常见模式:工厂模式,构造函数模式,原型模式 <span style="font-size:18px;"><!doctype html> <html ...
- js中点击事件方法三种方式的区别
在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 (1)注意函数名没有双引号. ...
- js中定义变量的三种方式const,val,let 的区别
js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 const b = 2;//正确 2 // const b;//错误,必须初始 ...
- js弹出对话框的三种方式（转）
原文地址:https://www.jb51.net/article/81376.htm javascript的三种对话框是通过调用window对象的三个方法alert(),confirm()和prom ...
- js页面取值的三种方式
<input id=""<radio <checkbox<div<img对于这些标签内参数取值,一般分为三种类型:一.有关id取值用 #:取id处的v ...
- JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
随机推荐
- 理解java的三大特性之多态（三）
摘自:http://cmsblogs.com/?p=52 面向对象编程有三大特性:封装.继承.多态. 封装隐藏了类的内部实现机制,可以在不影响使用的情况下改变类的内部结构,同时也保护了数据.对外界而已 ...
- bzero()等的区别
bzero 原型: extern void bzero(void *s, int n); 用法: #include <string.h> 功能:置字节字符串s的前n个字节为零. 说 ...
- JUnit使用Eclipse建立Test Suite - 就是爱Java
当JUnit有多个或所有的Test Case要执行,此时就需要Test Suite来管理众多的Test Case,利用Eclipse的整合开发环境,可以针对多个不相关的Test Case或Test S ...
- Decimal
Description 任意一个分数都是有理数,对于任意一个有限小数,我们都可以表示成一个无限循环小数的形式(在其末尾添加0),对于任意一个无限循环小数都可以转化成一个分数.现在你的任务就是将任意一个 ...
- ZOJ3519-Beautiful People：最长上升子序列的变形
Beautiful People Special JudgeTime Limit: 10000/5000MS (Java/Others)Memory Limit: 128000/64000KB (Ja ...
- 在Spring aop中的propagation的7种配置的意思
<tx:method name="find*" read-only="true" propagation ="NOT_SUPPORTED&quo ...
- java -jdk配置1（环境变量配置）
此文转载自:http://www.cnblogs.com/nicholas_f/articles/1494073.html 进行java开发,首先要安装jdk,安装了jdk后还要进行环境变量配置: 1 ...
- OpenWrt sscanf问题之于MT7620N与AR9341
在MT7620N平台做好了wifidog的相关调试工作,除了eth驱动.wireless性能问题,其余的都能够基本正常. 依据实际须要要对已完毕的工作在AR9341平台上实现. 事实上也简单.基本功能 ...
- python之面向对象(一)
python编程分为三个阶段: 面向过程编程:根据业务逻辑从上到下垒 函数式编程:将某功能进行函数封装,使用时调用函数即可,减少代码重复量 面向对象编程:对函数进行分类和封装 理论上我们是比较鄙视面向 ...
- .NET基础拾遗（4）委托和事件2
事件 事件是对象发送的消息,以发信号通知操作的发生.操作可能是由用户交互(例如鼠标单击)引起的,也可能是由某些其他的程序逻辑触发的. 引发事件的对象称为事件发送方.捕获事件并对其作出响应的对象叫做事件 ...