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加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
随机推荐
- BZOJ 2115: [Wc2011] Xor
2115: [Wc2011] Xor Time Limit: 10 Sec Memory Limit: 259 MB Submit: 2794 Solved: 1184 [Submit][Stat ...
- C语言里面关于数组的一个容易忽视的小细节
ginobili@VM_44_28_sles10sp1:~/code> cat test3.cpp #include <stdio.h> int main(){ char a[5] ...
- Codeforces 163A Substring and Subsequence
http://codeforces.com/problemset/problem/163/A?mobile=true 题目大意:给出两个串,问a的连续子串和b的子串(可以不连续)相同的个数. 思路:在 ...
- Altium Designer 覆铜时过孔连接形式的设置——只将过孔连接设置为Direct Connect
Altium Designer 在PCB覆铜时,所有的过孔和焊盘都是十字连接即Relief Connect连接的,没有像PROTEL 99SE一样只有接地的焊盘才是十字连接而过孔是直接连接的. 如下图 ...
- 学EE做硬件找工作不如学CS做软件，为什么会这样？
学EE做硬件找工作不如学CS做软件,为什么会这样? 电子工程(EE)就业最好的方向居然是转计算机,也许让有的人觉得很不公平,EE也是很重要的学科,我们学习也很努力,为什么就业会不如CS?也有的人好奇, ...
- 转:shell 经典, shell 十三问
原文链接:http://blog.csdn.net/freexploit/article/details/626660 我在 CU 的日子并不长,有幸在 shell 版上与大家结缘.除了跟众前辈学 ...
- Oracle索引状态查询&索引重建
--检查损坏索引 SELECT status, COUNT(*) FROM dba_indexes GROUP BY status UNION SELECT status, COUNT(*) ...
- Hibernate中Criteria的用法
概念 Criterion 是 Criteria 的查询条件.Criteria 提供了 add(Criterion criterion) 方法来添加查询条件. Criterion 接口的主要实现包括: ...
- leetcode_question_57 Insert Interval
Given a set of non-overlapping intervals, insert a new interval into the intervals (merge if necessa ...
- .net中将DataTable导出到word、Excel、txt、htm的方法
dt:DataTable strFile:fileName strExt:type private void GridExport(DataTable dt, string strFile, stri ...