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加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
随机推荐
- hdu 畅通工程
http://acm.hdu.edu.cn/showproblem.php?pid=1863 #include <cstdio> #include <cstring> #inc ...
- Codeforces 276D Little Girl and Maximum XOR
题意:给范围l,r选两个数亦或最大是多少. 思路:找到第一个l和r二进制下不相同的位置i,然后答案就是2^(i+1)-1,因为一个取0一个取1之后,后面的位置全部选1和全部选0,就是这样:011111 ...
- Linux企业级项目实践之网络爬虫（22）——编写爬虫系统服务控制脚本
需求:1.可通过 service spider start|stop|status|restart 命令对服务进行控制2.spider服务可开机自启动 start() { echo "sta ...
- ACM2036_改革春风吹满地（多边形面积计算公式）
用到的知识点: 代码如下: /* Input 输入数据包含多个测试实例,每个测试实例占一行,每行的开始是一个整数n(3<=n<=100),它表示多边形的边数(当然也是顶点数),然后是按照逆 ...
- window环境下安装 pip 工具 【pip为Python的扩展管理工具】
Python有一些扩展管理工具,例如easy_install和pip工具,我推荐各位使用pip工具,因为pip工具具有很好的安装和卸载体验. 我们首先需要打开pip的官方网站, 下载必要的文件包,然后 ...
- phpcms:三、头部包含
1‘标题:{if isset($SEO['title']) && !empty($SEO['title'])}{$SEO['title']}{/if}{$SEO['site_title ...
- [原创作品]手把手教你怎么写jQuery插件
这次随笔,向大家介绍如何编写jQuery插件.啰嗦一下,很希望各位IT界的‘攻城狮’们能和大家一起分享,一起成长.点击左边我头像下边的“加入qq群”,一起分享,一起交流,当然,可以一起吹水.哈,不废话 ...
- Java八个并发学习——线程同步工具CyclicBarrier
本文是一篇文章对网络的研究摘要,感谢您的无私分享. CyclicBarrier 类有一个整数初始值,此值表示将在同一点同步的线程数量.当当中一个线程到达确定点,它会调用await() 方法来等待其它线 ...
- QtWebkit2.2.0 HTML5.0支持情况
Canvas: 支持element, 2d context以及文本 解析规则:支持 HTML5 tokenizer/tree building, SVG in text/html, MathML ...
- js方法调用
<!DOCTYPE html> <html> <head> <title>测试</title> </head> <body ...