第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插件,实现了低 ...
随机推荐
- JVM基础知识及拓展
我们可以吧JVM的基本结构分为四块:类加载器.执行引擎.运行时数据区和本地接口.一般来说Java程序在JVM中的执行流程如下: ①.首先我们会利用javac命令将我们所编写的.java源代码文件变异成 ...
- Git使用规范(三)
今天我们来介绍一下Git的一些操作,这个里面主要是一些我们平时遇到的一些问题 1.当我进入了一个分支的是时候,我在查看git log的时候,为什么会有别人的信息,我一直以为 这个是查看分支提交情况, ...
- day 10 形态学处理 膨胀
#-*- coding:utf-8 -*- #1.导入包 import cv2 import numpy as np #2.导入图片 img = cv2.imread('home.jpg',0) #3 ...
- 感觉总结了一切python常见知识点，可直接运行版本
#encoding=utf-8#http://python.jobbole.com/85231/#作用域a=1def A(a): a=2 print 'A:',a def B(): print 'B: ...
- Linux命令应用大词典-第5章 显示文本和文件内容
5.1 cat:显示文本文件 5.2 more:分页显示文本文件 5.3 less:回卷显示文本文件 5.4 head:显示指定文件前若干行 5.5 tail:查看文件末尾数据 5.6 nl:显示文件 ...
- lintcode: Missing String
Missing String 描述: Given two strings, you have to find the missing string. Have you met this questi ...
- 《Git学习指南》学习笔记（二）
第三章 提交究竟是什么 每次提交都会生成一个40位的散列值.只要知道散列值,我们就可以恢复到该次提交,这个操作也被称之为检出(checkout)操作. 访问权限与时间戳 Git会保存每个文件原有的访问 ...
- Java中二进制数与整型之间的转换
import java.io.*; public class Test{ /** * 二进制与整型之间的转换 * @param args * @throws IOException */ public ...
- 【shell 每日一练6】初始化安装Mysql并修改密码
一.简单实现mysql一键安装 参考:[第二章]MySQL数据库基于Centos7.3-部署 此脚本前提条件是防火墙,selinux都已经设置完毕: [root@web130 ~]# cat Inst ...
- 已有海外版Office365，如何开通相同Tenant的Azure
下面这个步骤是开通海外版Azure的测试账号,请了解! 翻到如图位置 点击免费开始 下一步 输入验证代码,此页没截图 使用信用卡,需要visa或master 下一步认证完就可以使用,没有继续截图