第28天：js-Tab栏切换封装函数
一、input.value所有值都是string
二、变量和属性
var index=10;//变量
var arr=[];//数组
arr.index=20;//index为自定义属性，只能在arr下使用
alert(arr.index);
三、判断用户输入事件：oninput
四、多分支语句switch
语法格式
switch(参数){
case:参数1：
语句；
break；//退出
case:参数2：
语句；
break；//退出
...
default://默认
语句；
}
五、下拉菜单事件
sele.onchange=function(){}
案例：
1、多个Tab切换封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab切换封装</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 405px;
height: 400px;
border:1px solid #c1c1c1;
margin: 100px auto;
/*overflow: hidden;*/
}
.mt span{
display: inline-block;
width: 80px;
height: 30px;
text-align: center;
line-height: 30px;
background-color: #ff4400;
border-right: 1px solid #c1c1c1;
cursor: pointer;
}
.mt .current{
background-color: #3B90CD;
}
.mb li{
width: 100%;
height: 370px;
background-color: #3B90CD;
list-style: none;
display: none;
}
.mb .show{
display: block;
}
</style>
<script>
window.onload=function(){
function tab(obj){
//获取每个盒子的id
var target=document.getElementById(obj);
//获取对应id下的标签
var spans=target.getElementsByTagName("span");
var lis=target.getElementsByTagName("li");
for(var i=0;i<spans.length;i++){
spans[i].index=i;//设置索引号
spans[i].onmouseover=function(){
for(var j=0;j<spans.length;j++){
//清除所有的 类
spans[j].className="";
lis[j].className="";
}
//显示当前点击的类
this.className="current";
lis[this.index].className="show";//li利用spans.index,span和li对应起来
}
}
}
tab("one");
tab("two");
tab("three");
}
</script>
</head>
<body>
<div class="box" id="one">
<div class="mt">
<span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>科技模块</li>
<li>视频模块</li>
</ul>
</div>
</div> <div class="box" id="two">
<div class="mt">
<span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>科技模块</li>
<li>视频模块</li>
</ul>
</div>
</div> <div class="box" id="three">
<div class="mt">
<span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span>
</div>
<div class="mb">
<ul>
<li class="show">新闻模块</li>
<li>体育模块</li>
<li>娱乐模块</li>
<li>科技模块</li>
<li>视频模块</li>
</ul>
</div>
</div>
</body>
</html> 运行结果：
2、三种循环语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三个循环语句</title>
<script>
window.onload=function(){
//for循环
var sum=0;
for(var i=1;i<=100;i++){
sum+=i;
}
console.log(sum); //while循环
var j=1;
var sum1=0;
while(j<=100){
sum1+=j;
j++;
}
console.log(sum1); //do-while循环，至少执行一次
var k=1;
var sum2=0;
do{
sum2+=k;
k++;
}
while(k<=100)
console.log(sum2); }
</script>
</head>
<body> </body>
</html>
3、多分支switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多分支语句switch</title>
<script>
window.onload=function(){
//获取元素
var txt=document.getElementById("txt");
var btn=document.getElementById("btn");
btn.onclick=function(){
var val=txt.value;
switch(val){
case "苹果":
alert("苹果的价格是：5元");
break;
case "香蕉":
alert("香蕉的价格是：2元");
break;
case "梨":
alert("梨的价格是：1.5元");
break;
case "葡萄":
alert("葡萄的价格是：3元");
break;
default:
alert("今天没进货");
}
}
}
</script>
</head>
<body>
<input type="text" id="txt"><button id="btn">查询价格</button>
</body>
</html>
4、下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
background-image: url(images/chun1.jpg);
}
</style>
<script>
window.onload=function(){
//获取元素
var sele=document.getElementById("sele");
sele.onchange=function(){
//alert(this.value);
switch(this.value){
case "1":
19 document.body.style.backgroundImage="url(images/chun1.jpg)";
20 break;
case "2":
document.body.style.backgroundImage="url(images/xia1.jpg)";
break;
case "3":
document.body.style.backgroundImage="url(images/qiu1.jpg)";
break;
case "4":
document.body.style.backgroundImage="url(images/dong1.jpg)";
break;
default:
document.body.style.backgroundImage="url(images/chun1.jpg)";
}
} }
</script>
</head>
<body>
<select name="" id="sele">
<option value="1">春意绵绵</option>
<option value="2">夏日炎炎</option>
<option value="3">秋声瑟瑟</option>
<option value="4">白雪皑皑</option>
</select>
</body>
</html>
第28天：js-Tab栏切换封装函数的更多相关文章
- js tab栏切换
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
- 原生js tab 栏切换
<div id="box"> <div> <button>按钮1</button> <button>按钮2</bu ...
- JS实现 Tab栏切换案例
要求:当鼠标点击上面相应的选项卡(tab),下面页面的内容也随之而改变. 结构分析: 全部的内容都放到一个大的盒子里面,盒子里面又可以分为上面和下面两个盒子. 上面的盒子放了 5个li,装着5个小的选 ...
- jQuery带有定时器的tab栏切换
现在网上很多类似选项卡的切换,我们成为tab栏切换,比如下图: 新浪的tab栏切换 淘宝的tab栏切换 其中,新浪的tab栏鼠标放上去,可以快速的来回切换,但是如果采取ajax异步传输,不停去加载服务 ...
- tab栏切换制作
tab栏切换制作 先上图 要求1:默认状态,第一个选项卡被选中,展示第一个选项卡的内容 策略:第一个选项卡默认有被选中的样式,第一个选项卡对应的display: block,其他的dispaly设为n ...
- dataTable tab栏切换时错位解决办法
做后台管理类网站肯定要写列表,首选dataTable,功能强大 最近在做一个tab栏切换时发现了一个很诡异的事情:表头错位了! 主要时因为当table被隐藏后,table的header宽度会计算错乱, ...
- tab栏切换
最简单的tab栏切换 html部分 <ul class="tab"> <li class="item">待支付(1)</li> ...
- ES6面向对象实现tab栏切换效果
面向对象实现tab栏切换效果
- [javascript]switchTab:仿腾讯首页Tab栏切换js插件
腾讯首页的每个新闻栏目都是一个tab选项卡切换,属于延迟动作的:鼠标hover上去之后200毫秒才会切换,防止了因为浏览滑动导致的页面上选项卡的频繁切换.仿照这样的效果,自己写了一个js插件,实现了低 ...
随机推荐
- 【转】I2C总线相关知识
1. I2C access 1.1. I2C introduction I2C(Inter-Integrated Circuit)总线是由NXP恩智浦半导体公司在80年代开发的两线式串行总线,用来进行 ...
- [Python3.x]多次登陆锁定用户
要求:输入用户名,密码认证成功显示欢迎信息输入错误三次后锁定用户Readme: 1.account.txt是存放用户id及密码的文件 2.account_loc.txt是存放被锁定的用户id的文档,默 ...
- VINS（八）初始化
首先通过imu预积分陀螺仪和视觉特征匹配分解Fundamental矩阵获取rotationMatrix之间的约束关系,联立方程组可以求得外参旋转矩阵: 接下来会检测当前frame_count是否达到W ...
- 【转】MMO即时战斗：地图角色同步管理和防作弊实现
---转自CSDN 一.前言 无论是端游.页游.手游如果是采用了MMO即时战斗游戏模式,基本都会遇到同屏多角色实时移动.释放技能.战斗等场景,于是自然也需要实现如何管理同屏内各种角色的信息同步:例如角 ...
- 试用Markdown来写东西
试用Markdown来写东西 前言 之前有过一段时间的写东西的习惯,但是后来因为各种原因(主要是因为自己懒惰拖延),所以一直没有写,现在想再开始写,目的很明确,就是发现很多时候,写作能够很好的练习自己 ...
- Centos7添加静态路由
本文摘取自 Centos7系统配置上的变化(二)网络管理基础 一.ip route显示和设定路由 1.显示路由表 [root@centos7 ~]# ip route show default via ...
- Jedis 与 MySQL的连接线程安全问题
Jedis的连接是非线程安全的 下面是set命令的执行过程,简单分为两个过程,客户端向服务端发送数据,服务端向客户端返回数据,从下面的代码来看:从建立连接到执行命令是没有进行任何并发同步的控制 pub ...
- LeetCode 240——搜索二维矩阵 II
1. 题目 2. 解答 2.1. 方法一 从矩阵的左下角开始比较 目标值等于当前元素,返回 true: 目标值大于当前元素,j 增 1,向右查找,排除掉此列上边的数据(都比当前元素更小): 目标值小于 ...
- 深度学习笔记 (一) 卷积神经网络基础 (Foundation of Convolutional Neural Networks)
一.卷积 卷积神经网络(Convolutional Neural Networks)是一种在空间上共享参数的神经网络.使用数层卷积,而不是数层的矩阵相乘.在图像的处理过程中,每一张图片都可以看成一张“ ...
- 基于Hadoop2.5.0的集群搭建
http://download.csdn.net/download/yameing/8011891 一. 规划 1. 准备安装包 JDK:http://download.oracle.com/otn ...