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=& ...
随机推荐
- 廖雪峰Java5集合-6Stack-1使用Stack
1.栈的定义 栈Stack是一种后进先出(LIFO: Last In First Out)的数据结构,可以看作一端封闭的容器,先进去的元素永远在底部,最后出来. 栈有2个重要的方法: push(E e ...
- redis集群创建
先参考文章 https://www.cnblogs.com/PatrickLiu/p/8458788.html https://blog.csdn.net/fengshizty/article/det ...
- 1124 Raffle for Weibo Followers （20 分）
1124 Raffle for Weibo Followers (20 分) John got a full mark on PAT. He was so happy that he decided ...
- centos7部署openvpn-2.4.6
一.环境说明 返回主机的IP地址 # ip a | grep "scope global" | awk -F'[ /]+' '{print $3}' | head -1 [root ...
- CentOS 7安装Oracle 11gR2以及设置自启动（1）
一.环境准备 1.正确无误的CentOS 7系统环境 虚拟机要求: 内存至少2G 处理器至少2个 根分区要大于20G(安装oracle很占空间,空闲空间要足够) 2.正确的JDK环境 CentOS 7 ...
- golang "text/template" 模板语法简明教程
转自:https://www.cnblogs.com/Pynix/p/4154630.html [模板标签] 模板标签用"{{"和"}}"括起来 [注释] ...
- 在linux下，去除^M，将windows格式文件(dos文件)改为unix格式文件
在Windows系统下编辑的文件,换行符回车的格式为'\r\n',在linux系统下,回车的格式为'\n',在Windows下编辑的文本文件在上传至linux服务器时,回车'\r\n'就显示成^M+' ...
- int main(int argc,char* argv[])浅析
int main(int argc,char* argv[])浅析 argc : 指输入参数个数,默认值1,就是执行程序名称 argv[] : 输入参数数组指针 举个栗子: 1. 编写一个argc.c ...
- Synchronized常用用法
我们都知道 Synchronized 是线程安全同步用的,大部分程序可能只会用到同步方法上面.其实 Synchronized 可以用到更多的场合,栈长列举了以下几个用法. 1.同步普通方法 这个也是我 ...
- Android WebView清空缓存
Android原生和H5混合开发,要求用户退出登录后清空H5所有的缓存: 1.清空Cookie CookieSyncManager.createInstance(context.getApplicat ...