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加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
随机推荐
- leetcode_Substring with Concatenation of All Words
You are given a string, S, and a list of words, L, that are all of the same length. Find all startin ...
- Borland license information was found,but it is not valid for delphi.
The start Delphi7 come amiss: Borland license information was found,but it is not valid for delphi. ...
- android获取屏幕宽高与获取控件宽高
获取屏幕宽高 // 获取屏幕宽高(方法1) int screenWidth = getWindowManager().getDefaultDisplay().getWidth(); // 屏幕宽(像素 ...
- perl post 请求相关参数
$ua->post( $url, \%form ) $ua->post( $url, \@form ) $ua->post( $url, \%form, $field_name =& ...
- bzoj1624 [Usaco2008 Open] Clear And Present Danger 寻宝之路
Description 农夫约翰正驾驶一条小艇在牛勒比海上航行． 海上有N(1≤N≤100)个岛屿,用1到N编号．约翰从1号小岛出发,最后到达N号小岛．一 张藏宝图上说,如果他的路程上 ...
- Json帮助类以及如何使用
首先要添加引用System.Runtime.Serialization. public class JSONHelper { public static string Serialize<T&g ...
- pip 错误Requested **, but installing version **
使用pip升级时,虽然指定了版本,也使用了--upgrade参数,但pip就是不升级,Requested **, but installing version **,手动删了源文件也不行.后来发现一个 ...
- [置顶] android之存储篇_SQLite数据库_让你彻底学会SQLite的使用
SQLite最大的特点是你可以把各种类型的数据保存到任何字段中,而不用关心字段声明的数据类型是什么. 例如:可以在Integer类型的字段中存放字符串,或者在布尔型字段中存放浮点数,或者在字符型字段中 ...
- hadoop执行hdfs文件到hbase表插入操作(xjl456852原创)
本例中需要将hdfs上的文本文件,解析后插入到hbase的表中. 本例用到的hadoop版本2.7.2 hbase版本1.2.2 hbase的表如下: create 'ns2:user', 'info ...
- windows下批量杀死进程
有时候因为病毒或其它原因,启动了一系列的进程,而且有时杀了这个,又多了那个.使用命令taskkill可将这些进程一下子所有杀光: C:\Users\NR>taskkill /F /im fron ...