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=& ...
随机推荐
- 多款Android播放器源码集锦
原帖地址:http://blog.csdn.net/jingwen3699/article/details/7765804/
- c#特性学习(1)
C#中的特性我认为可以理解为Java中的注解,见名知意,就是描述这个类或是属性的一个信息,是一个语法糖.原理运用的是反射,下面我来演示一下它的原理.其中引用了软谋的代码. 举一个栗子.我们在做code ...
- HBase常用操作命令
HBase常用操作命令 1.进入HBase脚本客户端 #hbase shell #进入HBase脚本客户端 > whoami #查看当前登录用户 > status ...
- Sep 15th 2018
人在最困难的最孤独的时候,是否都会有过怀疑和产生退缩的念头呢.开始怀疑为什么要坚持,坚持的意义何在.我现在的状态就是一个谋生赚钱的机器吗,远离妻子和孩子,一人孤独的在这座城市,得到的难道能够足以弥补所 ...
- html 网页生产pdf文件
在nuget中安装组件 Install-Package CPechkin https://www.nuget.org/packages/CPechkin/ 根据html生产pdf文件 using Sy ...
- IDEA15使用maven编译scala和java
机器安装maven,在IDEA中配置maven的home 创建项目:new-maven–> scala-archetype-simple project structure–>创建src. ...
- 实用JS代码
浏览器功能 1.0 浏览器判断 如下代码判断是手机还是电脑访问的网站 function IsPC () { var userAgentInfo = navigator.userAgent var Ag ...
- C# webbrowser如何获取滚动条的位置？
获取滚动条的位置: HtmlDocument document = WB1.Document; int top = document.GetElementsByTagName("HTML& ...
- Uncaught (in promise) DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
解决方案:url前面一定要加http://
- 【死磕 Spring】—— IoC 之深入理解 Spring IoC
本文主要基于 Spring 5.0.6.RELEASE 摘要: 原创出处 http://svip.iocoder.cn/Spring/IoC-intro/ 在一开始学习 Spring 的时候,我们就接 ...