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, ' ...
随机推荐
- JAVA常用的集合类
package com.xian.test; import java.util.ArrayList; import java.util.Enumeration; import java.util.Ha ...
- Template(模板)模式
第三章:模板模式 Template模式比较简单,是基于继承关系的一种设计模式,由父类定义处理流程框架,由子类中实现具体处理. Code: package example.template; /*** ...
- kubeadm源码分析
k8s离线安装包 三步安装,简单到难以置信 kubeadm源码分析 说句实在话,kubeadm的代码写的真心一般,质量不是很高. 几个关键点来先说一下kubeadm干的几个核心的事: kubeadm ...
- 33行代码爬取妹子图片（bs4+urllib）
from bs4 import BeautifulSoupimport urllib2import urllibimport lxmlimport os def get_imgs(): image_c ...
- [原创实践]RedHat Enterprise Linux 5 安装GCC和redis
Redis的安装需要使用GCC,Red Hat Enterprise 5默认是不安装gcc的,需要自己手动安装. 1:查看系统中是否有gcc gcc -v 查看本机linux版本 lsb_releas ...
- CodeForces 939F Cutlet
洛谷题目页面传送门 & CodeForces题目页面传送门 题意见洛谷里的翻译. 这是一道毒瘤的div. 2 F,我是不可能比赛的时候做出来的... (以下设两面都要煎\(n\)分钟,有\(m ...
- ZooKeeper系列（五）—— ACL 权限控制
一.前言 为了避免存储在 Zookeeper 上的数据被其他程序或者人为误修改,Zookeeper 提供了 ACL(Access Control Lists) 进行权限控制.只有拥有对应权限的用户才可 ...
- Redis|Sentinel 高可用架构
一 前言 Redis-Sentinel是Redis官方推荐的高可用性(HA)解决方案,当用Redis做Master-slave的高可用方案时,假如master宕机了,Redis本身(包括它的很多客户端 ...
- MySQL之主从同步
一.主从同步概念 1.1 什么是主从同步? MySQL 主从同步是指将数据从一个 MySQL 数据库服务器主节点复制到一个或多个从节点.MySQL 默认采用异步复制方式,这样从节点不用一直访问主服务器 ...
- Flink中Periodic水印和Punctuated水印实现原理(源码分析)
在用户代码中,我们设置生成水印和事件时间的方法assignTimestampsAndWatermarks()中这里有个方法的重载 我们传入的对象分为两种 AssignerWithPunctuatedW ...