效果图：

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中选项卡的几种写法的更多相关文章

  1. javascript中面向对象的5种写法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 实现JavaScript中继承的三种方式

    在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply.call方法 对象实例间的继承.     一.原型链继承 在原型链继承方面,JavaScript与java.c#等语言类似 ...

  3. javascript中创建对象的几种不同方法

    javascript中创建对象的几种不同方法 方法一:最直白的方式:字面量模式创建 <script> var person={ name:"小明", age:20, s ...

  4. 请写出JavaScript中常用的三种事件。

    请写出JavaScript中常用的三种事件. 解答: onclick,onblur,onChange

  5. ThinkPHP中Widget的两种写法及调用

    Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...

  6. 整理：WPF中Binding的几种写法

    原文:整理:WPF中Binding的几种写法 目的:整理WPF中Bind的写法 <!--绑定到DataContext--> <Button Content="{Bindin ...

  7. javascript中this的四种用法

    javascript中this的四种用法 投稿:hebedich 字体:[增加 减小] 类型:转载 时间:2015-05-11我要评论 在javascript当中每一个function都是一个对象,所 ...

  8. JavaScript中创建对象的三种方式!

    JavaScript中创建对象的三种方式! 第一种 利用对象字面量! // 创建对象的三种方式! // 1 对象字面量. var obj = { // 对象的属性和方法! name: 'lvhang' ...

  9. javascript中 for循环的一些写法 for length 以及for in 还有 for of 的区别

    最近在写一些前端的代码,遇到一个产品列表遍历的问题,正好使用到for 的几种用法,于是研究了下. 代码如下,先说明下goodslist 是一个产品列表 形如这样的数据格式 { ‘types’:1, ' ...

随机推荐

  1. 【POJ - 3258】River Hopscotch（二分）

    River Hopscotch 直接中文 Descriptions 每年奶牛们都要举办各种特殊版本的跳房子比赛,包括在河里从一块岩石跳到另一块岩石.这项激动人心的活动在一条长长的笔直河道中进行,在起点 ...

  2. Web前端开发——Ionic 3.0【爱创课堂专业前端培训】

    前端开发——Ionic 3.0 一.Ionic 移动端有三种开发方向 源生APP开发, 移动端web开发 混合开发(介于以上两者之间的) 类微信小程序 reactNative,用react语法,开发a ...

  3. 在vue-cli 3中， 给stylus、sass样式传入共享的全局变量

    在开发中有时,我们定义了大量的基础样式变量,例如: 大量的vue单文件组件会用到这些变量,每个组件都引人一次又太麻烦.全局引入是个不错的方法,于是,在main.js 中引入variable.styl文 ...

  4. GIS历史概述与WebGis应用开发技术浅解

    声明:本篇在李晓晖的<杂谈WebGIS>,补充更多的资料说明.基于地图二次开发一直断断续续在做,这里算是补充一下基本功把.其实对于前端,WebGis开发都是api,抄demo,改.GIS深 ...

  5. 利用tensorboard可视化checkpoint模型文件参数分布

    写在前面: 上周微调一个文本检测模型seglink,将特征提取层进行冻结,只训练分类回归层,然而查看tensorboard发现里面有histogram显示模型各个参数分布,看了目前这个训练模型参数分布 ...

  6. Opengl_入门学习分享和记录_番外篇00（MacOS上如何给Xcode 适配openGL）

    现在前面的废话:哇这次没有鸽太久,突然想起来还没有介绍如何适配opengl的衍生库.今天一并介绍下,同样看时间允不允许,让我再把之前学到的一些东西再次总结一遍. 正文开始: 首先大家要知道我们的Ope ...

  7. CSV Data Set Config 拓展开发

    1.目的 在日常的性能测试项目中,经常会遇到参数化的问题,我们所熟知的LR工具对参数化支持非常友好,然而JMeter相对逊色一些.大家都知道在使用JMeter工具参数化时常用CSV Data Set ...

  8. HTTP与HTTPS之面试必备

    本文主要讲解Http与https的区别,以及https是怎样加密来保证安全的. 首先讲这俩个协议的简单区别: HTTP:超文本传输协议. HTTPS:安全套接字层超文本传输协议HTTP+SSL HTT ...

  9. Springboot 优雅停止服务的几种方法

    在使用Springboot的时候,都要涉及到服务的停止和启动,当我们停止服务的时候,很多时候大家都是kill -9 直接把程序进程杀掉,这样程序不会执行优雅的关闭.而且一些没有执行完的程序就会直接退出 ...

  10. 谈谈surging 微服务引擎 2.0的链路跟踪和其它新增功能

    一.前言 surging是基于.NET CORE 服务引擎.初始版本诞生于2017年6月份,经过NCC社区二年的孵化,2.0版本将在2019年08月28日进行发布,经历二年的发展,已经全部攘括了微服务 ...