JavaScript中选项卡的几种写法
效果图：
1.基本写法
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li{
list-style: none;
}
ul{
width: 300px;
height: 40px;
background: #ccc;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}
li{
width: 33%;
text-align: center;
line-height: 40px;
}
li.active{
background: red;
}
.box{
width: 298px;
height: 200px;
border: 1px solid red;
}
.box p {
height: 200px;
display: none;
margin: 0;
}
.box p.active{
display: block;
}
.box p:nth-child(1){
background: yellowgreen;
}
.box p:nth-child(2){
background: indianred;
}
.box p:nth-child(3){
background:mediumturquoise;
}
</style>
</head>
<body>
<div>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box">
<p class="active">1111111111111111111111111111111</p>
<p>2222222222222222222222222222222</p>
<p>3333333333333333333333333333333</p>
</div>
</div>
</body>
<script>
var ol=document.querySelectorAll("li");
var op=document.querySelectorAll("p");
for(var i=0;i<ol.length;i++){
ol[i].index=i;
ol[i].onclick=function(){
for(var j=0;j<ol.length;j++){
ol[j].className="";
op[j].style.display="none";
}
this.className="active";
op[this.index].style.display="block"
}
}
</script>
</html>
|
2.面向对象
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul li{
list-style: none;
}
ul{
width: 300px;
height: 40px;
background: #ccc;
display: flex;
justify-content: space-between;
padding: 0;
margin: 0;
}
li{
width: 33%;
text-align: center;
line-height: 40px;
}
li.active{
background: red;
}
.box{
width: 298px;
height: 200px;
border: 1px solid red;
}
.box p {
height: 200px;
display: none;
margin: 0;
}
.box p.active{
display: block;
}
.box p:nth-child(1){
background: yellowgreen;
}
.box p:nth-child(2){
background: indianred;
}
.box p:nth-child(3){
background:mediumturquoise;
}
</style>
</head>
<body>
<div>
<ul>
<li class="active">1</li>
<li>2</li>
<li>3</li>
</ul>
<div class="box">
<p class="active">1111111111111111111111111111111</p>
<p>2222222222222222222222222222222</p>
<p>3333333333333333333333333333333</p>
</div>
</div>
</body>
<script>
//选项卡：点击对应按钮的时候，切换对应的内容
// 1.选元素
// 2.绑定事件
// 3.找点击的元素的索引
// 4.根据索引，显示内容
function Tab(){
this.li=document.querySelectorAll("li");
this.p=document.querySelectorAll("p");
this.init();
}
Tab.prototype.init=function(){
var that=this;
for(var i=0;i<this.li.length;i++){
this.li[i].index=i;
this.li[i].onclick=function(){
that.abc=this.index;
that.display();
}
}
}
Tab.prototype.display=function(){
for(var i=0;i<this.li.length;i++){
this.li[i].className="";
this.p[i].className="";
}
this.li[this.abc].className="active";
this.p[this.abc].className="active";
}
new Tab();
</script>
</html>
|
JavaScript中选项卡的几种写法的更多相关文章
- javascript中面向对象的5种写法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 实现JavaScript中继承的三种方式
在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承. 一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...
- javascript中创建对象的几种不同方法
javascript中创建对象的几种不同方法 方法一:最直白的方式:字面量模式创建 <script> var person={ name:"小明", age:20, s ...
- 请写出JavaScript中常用的三种事件。
请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange
- ThinkPHP中Widget的两种写法及调用
Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...
- 整理：WPF中Binding的几种写法
原文:整理:WPF中Binding的几种写法 目的:整理WPF中Bind的写法 <!--绑定到DataContext--> <Button Content="{Bindin ...
- javascript中this的四种用法
javascript中this的四种用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论 在javascript当中每一个function都是一个对象,所 ...
- JavaScript中创建对象的三种方式!
JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...
- javascript中 for循环的一些写法 for length 以及for in 还有 for of 的区别
最近在写一些前端的代码,遇到一个产品列表遍历的问题,正好使用到for 的几种用法,于是研究了下. 代码如下,先说明下goodslist 是一个产品列表 形如这样的数据格式 { ‘types’:1, ' ...
随机推荐
- F#周报2019年第31期
新闻 现在开始接受FSSF的第七次师友计划申请 Xamarin播客:XAML热重载 TorchSharp:将PyTorch引擎带入.NET 视频及幻灯片 F#中的异步编程2/3--实现异步工作流 ML ...
- Windows的 IIS 部署django项目
Windows的 IIS 部署django项目 1.安装Windows的IIS 功能(win10为例): (1)进入控制面板 :选择大图标 进入程序和功能 (2)启用或者关闭Windows功能 ...
- Hadoop 系列（七）—— HDFS Java API
一. 简介 想要使用 HDFS API,需要导入依赖 hadoop-client.如果是 CDH 版本的 Hadoop,还需要额外指明其仓库地址: <?xml version="1.0 ...
- 2.PHP利用PDO连接方式连接mysql数据库
代码如下 <?php$serverName = "这里填IP地址";$dbName = "这里填数据库名";$userName = "这里填用户 ...
- BFS DFS模板
转载于https://blog.csdn.net/alalalalalqp/article/details/9155419 BFS模板: #include<cstdio> #include ...
- [译]使用golang每分钟处理百万请求
[译]使用golang每分钟处理百万请求 在Malwarebytes,我们正在经历惊人的增长,自从我在1年前加入硅谷的这家公司以来,我的主要职责是为多个系统做架构和开发,为这家安全公司的快速发展以及百 ...
- 算法与数据结构基础 - 拓扑排序(Topological Sort)
拓扑排序基础 拓扑排序用于解决有向无环图(DAG,Directed Acyclic Graph)按依赖关系排线性序列问题,直白地说解决这样的问题:有一组数据,其中一些数据依赖其他,问能否按依赖关系排序 ...
- 利用tensorboard可视化checkpoint模型文件参数分布
写在前面: 上周微调一个文本检测模型seglink,将特征提取层进行冻结,只训练分类回归层,然而查看tensorboard发现里面有histogram显示模型各个参数分布,看了目前这个训练模型参数分布 ...
- intellIJ IDEA学习笔记3
intellij idea 的快捷鍵 https://blog.csdn.net/wei83523408/article/details/60472168 https://www.cnblogs.co ...
- 高速开车换底盘记：Windows 与 Linux 部署都抗住了，但修车任务艰巨
抱歉,又是一篇流水账,在排查问题的焦头烂额中写博客的确是一个挑战,望大家见谅. 今天园友溪源More发了一篇博文博客园翻车启示录,而翻车之后的最新进展是——昨天下午我们又把 .net core 引擎的 ...