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=& ...
随机推荐
- 弹性势能，position，min用法，获取元素的宽
弹性势能: 网页div移动的mousemove的次数,跟div移动的距离没有关系,跟鼠标移动的快慢有关,浏览器自身有个计数事件,几毫秒 _this.seed*=0.95 //摩擦系数的写法 posit ...
- Ring0 - Lookaside结构
由于频繁的申请,回收内存会导致在内存上产生大量的内存"空洞".这时使用Lookaside. 1.每次申请固定大小的内存. 2.申请和回收的操作十分频繁. 实现原理: 他先向wind ...
- Oracle group by
group by 简单点理解就是根据什么分组 为此 group by job 根据job进行分组 举例:在Oracle当中scott/oracle 下有emp表 进行如下操作 体会order b ...
- linux 安装软件各种错误集锦及解决方法
1.最小化安装了centos, 但是使用ifconfig命令时候出现”bash ifconfig command not found” .解决方法:yum -y install net-tools.x ...
- Round544div3E(1133E)
一.题目链接 https://codeforces.com/problemset/problem/1133/E 二.思路 显然要使用dp,因为中间有部分人不会选取. 令$dp[i][j]$表示在前$i ...
- css grid 网格布局
前几天研究了一下这个布局方式,笔记待更新 先放一下学习站点 文档 我应该尝试使用CSS Grid Layout的IE实现吗 https://hacks.mozilla.org/2018/02/css- ...
- 关于微信小程序更新内容后手机上不能及时显示的办法
这几天一直在做微信小程序的二次开发,每天都要发布程序,但是发布之后微信上查看小程序和以前的一模一样,丝毫没有改变,但是我再本地上却改变了,而且没有开的不校验合法域名那个.这是为啥呢????? 这是跟小 ...
- java 多线程（生产者消费者）
转 https://www.oschina.net/code/snippet_111708_25438 这个问题挺经典,我这个解法的本质在于将问题抽象为生产者消费者模型,但是是一个特殊的生产者消费者模 ...
- 1.spring boot起步之Hello World【从零开始学Spring Boot】
[视频&交流平台] àSpringBoot视频 http://study.163.com/course/introduction.htm?courseId=1004329008&utm ...
- activiti explorer5.22.0源代码解读
请求通过ExplorerApplicationServlet(AbstractApplicationServlet.service()方法)进入web系统中. Activiti Explorer的应用 ...