js 选项卡制作
知识回顾，制作JS选项卡，仅供参考
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style>
*{
margin:0;
padding:0;
text-decoration: none;
}
li{
list-style-type: none;
}
div.con{
position:relative;
width:300px;
height:400px;
background: #ccc;
margin: 100px auto;
border: 1px solid #531;
}
.title{
width:100%;
height:40px;
background: #aaf;
border: 1px solid #eee;
}
.content{
width:100%;
height:360px;
}
.title li{
float:left;
display: inline-block;
width:25%;
text-align: center;
line-height: 40px;
cursor:pointer;
cursor:hand;
}
.content div li{
height:30px;
line-height: 30px;
margin:0 20px;
}
.content div li span.nei{
margin-left:10px;
}
</style>
</head>
<body>
<div class="con">
<ul class="title">
<li>销售</li>
<li>技术支持</li>
<li>研发</li>
<li>行政</li>
</ul>
<ul class="content">
<div>
<li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">销售了一台电脑</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">销售了一台键盘</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">销售了一条牛仔裤</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">销售了一台手机屏幕</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">5</span><span class="nei">销售了一双筷子</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">6</span><span class="nei">销售了一件快递单纸箱</span></a></li>
</div>
<div>
<li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">维护了一台电脑</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">维护了一台键盘</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">更换了一条牛仔裤</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">维护了一台手机屏幕</span></a></li>
</div>
<div>
<li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">研发了一台电脑</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">研发了一台键盘</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">研发了一条牛仔裤</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">4</span><span class="nei">研发了一台手机屏幕</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">5</span><span class="nei">研发了一台手机屏幕</span></a></li>
</div>
<div>
<li><a href="javascript:;" class="he"><span class="tle">1</span><span class="nei">发布了一项公告</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">2</span><span class="nei">发布了一项通知</span></a></li>
<li><a href="javascript:;" class="he"><span class="tle">3</span><span class="nei">发布了一则简讯</span></a></li>
</div>
</ul>
</div>
</body>
</html>
js代码：
1. 流程式结构：
window.onload = function(){
var ali = document.querySelectorAll('.title li');
var adiv = document.querySelectorAll('.content div');
// 初始化
ali.forEach(function(oli,index){
if(index ==0){
oli.style.background = 'red';
adiv[index].style.display = 'block';
}else{
oli.style.background = '#aaf';
adiv[index].style.display = 'none';
}
});
// 设置动态改变选择li和显示div
ali.forEach(function(oli,index){
oli.onclick = function(){
for(var i=0;i<ali.length;i++){
ali[i].style.background = '#aaf';
adiv[i].style.display = 'none';
}
this.style.background = 'red';
adiv[index].style.display = "block";
}
});
};
2. 对象式结构：
window.onload = function(){
var Li_obj = {
ali : [],
adiv : [],
setange : function(){
this.ali = document.querySelectorAll('.title li');
this.adiv = document.querySelectorAll('.content div');
},
init:function(){
this.setange();
var that = this;
this.ali.forEach(function(oli,index){
if(index==0){
oli.style.background = 'red';
that.adiv[index].style.display = 'block';
}else{
oli.style.background = '#aaf';
that.adiv[index].style.display = 'none';
};
});
},
toogle:function(){
var that = this ;
this.ali.forEach(function(oli,index){
oli.onclick = function(){
for(var i=0;i<that.ali.length;i++){
that.ali[i].style.background = '#aaf';
that.adiv[i].style.display = 'none';
}
this.style.background = 'red';
that.adiv[index].style.display = "block";
}
});
},
};
Li_obj.init();
Li_obj.toogle();
};
3.构造函数的原型对象式结构：
window.onload = function(){
function getli(){
this.ali = document.querySelectorAll('.title li');
this.adiv = document.querySelectorAll('.content div');
};
getli.prototype.init = function(){
var that = this ;
this.ali.forEach(function(oli,index){
if(index==0){
oli.style.background = 'red';
that.adiv[index].style.display = 'block';
}else{
oli.style.background = '#aaf';
that.adiv[index].style.display = 'none';
};
});
};
getli.prototype.toogle = function(){
var that = this ;
this.ali.forEach(function(oli,index){
oli.onclick = function(){
for(var i=0;i<that.ali.length;i++){
that.ali[i].style.background = '#aaf';
that.adiv[i].style.display = 'none';
}
this.style.background = 'red';
that.adiv[index].style.display = "block";
}
});
}
var OLI = new getli();
OLI.init();
OLI.toogle();
}
运行结果：
备注：以上结果运行环境：谷歌浏览器；ie浏览器不支持forEach函数，要改成for循环来进行
js 选项卡制作的更多相关文章
- 一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app
一步一步教你用 Vue.js + Vuex 制作专门收藏微信公众号的 app 转载 作者:jrainlau 链接:https://segmentfault.com/a/1190000005844155 ...
- Blazor组件自做七 : 使用JS隔离制作定位/持续定位组件
1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加geolocation子文件夹,添加geolocation.js文件 本组件主要是调用浏览器两个API实现基于浏览器的定位功能,现代 ...
- Blazor组件自做二 : 使用JS隔离制作手写签名组件
Blazor组件自做二 : 使用JS隔离制作手写签名组件 本文相关参考链接 JavaScript 模块中的 JavaScript 隔离 Viewer.js工程 Blazor组件自做一 : 使用JS隔离 ...
- 简单的选项卡制作（原生JS）
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 使用『jQuery』『原生js』制作一个选项卡盒子 —— { }
效果 HTML 部分 <body> <div id="main-box"> <div id="left-nav"></ ...
- JQuery 网页选项卡制作
网页选项卡可以较好的利用有限的页面来展示更多的元素,而使用JQuery来制作网页选项卡也是一件非常简单的事情.今天就来分享一个网页选项卡的制作小技巧. 引入所需库 选项卡原理 业务核心 完整小例子 引 ...
- 慕课编程题JS选项卡切换
Javascript进阶篇的最后一节是一个选项卡切换的编程,要求效果如下. 这里涉及到两块,一个是内容的切换显示,一个是红色的边框样式切换. 内容切换可以用纯js代码实现,但当这里还需设置一个红色边框 ...
- js 选项卡实现
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- 原生JS 选项卡代码实现
可实现同页面多个选项卡 效果图: 代码实现: HTML部分 <div class="main" id="tabs"> <div class=& ...
随机推荐
- [UE4]认识Decorator
Decorator装饰器:即为其他行为树系统中的条件语句,附着于一个Composite(组合节点)或者Task(任务节点),并定义树中的一个分支或者单个节点是否可被执行. Decorator装饰器节点 ...
- Windows平台下使用CodeBlocks+GCC编译器生成动态dll,C#调用报错
报无法加载dll错误,解决方法: 1) 编译选择设置成x86,即-m322) 必须在c#程序目录下加上libgcc_s_dw2-1.dll
- 知识点：Navicet Mysql数据库电脑本地备份
Navicet Mysql数据库电脑本地备份 1.打开navicat客户端,连上mysql后,双击左边你想要备份的数据库.点击“计划”,再点击“新建批处理作业”. 2.双击上面的可用任务,它就 ...
- Java基础知识_毕向东_Java基础视频教程笔记(26 反射)
Java反射机制: 是在运行状态中,对于任意一个类(class)文件,都能够知道这个类的所有属性和方法,对于任意一个对象,都能够调用它的任意一个方法和属性.这种动态获取的信息以及动态调用对象的方法的功 ...
- TP微信扫码支付
1.官网下载php扫码支付adk,放在项目引入第三方类库中 2.配置config中相关参数 注意:可能会遇到问题 微信支付错误问题的解决:curl出错,错误码:60 Fatal error: Unca ...
- Python列表生成式和生成器
[1]列表生成器:列表生成式就是一个用来生成列表的特定语法形式的表达式. 1.基础语句结构:[exp for iter_var in iterable例如:a=[f(x) for x in range ...
- 【eclipse jar包】在编写java代码时，为方便编程，常常会引用别人已经实现的方法，通常会封装成jar包，我们在编写时，只需引入到Eclipse中即可。
Eclipse中导入外部jar包 在编写java代码时,为方便编程,常常会引用别人已经实现的方法,通常会封装成jar包,我们在编写时,只需引入到Eclipse中即可. 工具/原料 Eclipse 需要 ...
- 安全测试1_Web知识简介
接下去所有的安全测试都是本人学习安全测试的过程,随笔中会截取云课堂视频中的图片(比较生动和形象,便于理解),主要目的是方便自己以后复习和巩固! 1.Web发展阶段概述: 2.web安全我能提发展形势: ...
- [oracle,2017-11-28] 怎么判断oracle数据库中字段是否为空
要给oracle某个字段插入空值非常简单 insert into table(column) values('') 但是查询的时候通过语句 select * from table where colu ...
- 【IP代理】国内省市域名代理
最近遇到一个测试问题,就是投放时需要按地域投放,所以需要对指定的IP地址范围内的地方投放才有效. 所以,就调查了下IP代理的方式,一个是SSR,这个好像只能代理国外的域名方式,另外一个就是百度搜索IP ...