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加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
随机推荐
- Spark问题记录
Spark 多线程时的序列化问题 临时记录 Exception in thread "Thread-28" org.apache.spark.SparkException: Ta ...
- ubuntu12.04安装jdk-7u79-linux-i586.tar.gz
第一步:下载jdk-7u79-linux-i586.tar.gz 1.wget -c http://download.oracle.com/otn-pub/java/jdk/7/jdk-7-linux ...
- python 3.5 格式化字符串输出
#!/usr/bin/env python #encoding: utf-8 #.strip('里面可以去掉字符串中两边的字符') name = input('name :').strip(' ') ...
- 修改textField的placeholder的字体颜色、大小
textField.placeholder = @"username is in here!"; [textField setValue:[UIColor redColor] fo ...
- linux中screen命令的用法
http://www.9usb.net/201002/linux-screen-mingling.html 作为linux服务器管理员,经常要使用ssh登陆到远程linux机器上做一些耗时的操作.也许 ...
- 从点击Button到弹出一个MessageBox， 背后发生了什么（每个UI线程都有一个ThreadInfo结构， 里面包含4个队列和一些标志位）
思考一个最简单的程序行为:我们的Dialog上有一个Button, 当用户用鼠标点击这个Button时, 我们弹出一个MessageBox. 这个看似简单的行为, 谁能说清楚它是如何运行起来的,背 ...
- ECMAScript 5/6/7兼容性速查表
http://kangax.github.io/compat-table/es5/ 秒查ECMAScript在各大浏览器的兼容性,点击右上角按钮可以“在5/6/7/非标”之间切换.做JavaScrip ...
- [置顶] 单片机C语言易错知识点经验笔记
今天写这一篇文章并不是因为已经想好了一篇文章才写下来,而是我要将这一篇文章作为一个长期的笔记来写,我会一直更新.在进行单片机开发时,经常都会出现一些很不起眼的问题,这些问题其实都是很基础的c语言知识点 ...
- c语言指向结构体的指针作为函数参数
注意 这里包括形参和实参 struct dangdangtest { ]; int num; }; void change(int num)//值传递 新建一个变量接受传递的值 { num = ; } ...
- python高级编程：有用的设计模式1
# -*- coding: utf-8 -*-__author__ = 'Administrator'#python高级编程:有用的设计模式#设计械是可复用的,某种程序上它对软件设计中觉问题提供的语言 ...