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=& ...
随机推荐
- vultr 上实现高可用冗余浮动公网IP出口（使用BIRD+BGP协议）High Availability on Vultr with Floating IP and BGP
官方文档: https://www.vultr.com/docs/high-availability-on-vultr-with-floating-ip-and-bgp https://www.vul ...
- is not valid JSON: json: cannot unmarshal string into Go value of type map[string]interface | mongodb在windows和Linux导出出错
执行mongoexport命令的时候 mongoexport --csv -f externalSeqNum,paymentId --host 127.0.0.1:27017 -d liveX -c ...
- redis问题：redis-server.exe双击闪退 win10系统
转:https://blog.csdn.net/qq_40361770/article/details/80454248 解决方法: 1-win+R 打开命令行 2-cd至redis目录,例如 D:\ ...
- Service Worker初体验
http://web.jobbole.com/84792/ http://imweb.io/topic/56592b8a823633e31839fc01
- linux的cd、ls、chmod命令
cd ls ls:查看权限 chmod:修改权限
- 浏览器兼容java小程序配置说明
最近在使用的一个web应用系统是内嵌了java小程序,遇到了各种浏览器兼容性问题,现梳理如下: 1.通过以下链接检测当前电脑是否已经安装有java https://java.com/zh_CN/dow ...
- SAS数据集推送到sql server 数据库 实现代码段
libname fdsas ODBC datasrc=fdsas user=fdsas password=fdsas123 preserve_tab_names=yes connection=shar ...
- Servlet（API）生命周期
一.最上层接口Servlet 查看Servlet接口源码: 有5个方法 访问过程(默认): 1.进行Servlet类加载 当Tomcat容器启动后,服务器寻找应用部署的描述文件(web.xml),从部 ...
- XML与 实体的相互转化
using System; using System.Linq; using System.Xml; using System.Reflection; using System.Data; using ...
- FAILED: Execution Error, return code 1 from org.apache.hadoop.hive.ql.exec.DDLTask. com/mongodb/util/JSON
问题: 将MongoDB数据导入Hive,按照https://blog.csdn.net/thriving_fcl/article/details/51471248文章,在hive建外部表与mongo ...