第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插件,实现了低 ...
随机推荐
- go基础语法-条件语句
1.if else 语句 if语句后面的条件不需要括号 if n > 0 { return 1 }else { return -1 } 'if'之后,条件判断之前,可以初始化变量(作用域为整个i ...
- [POJ1014]Dividing（二进制优化多重背包）
#include <cstdio> #include <algorithm> #include <cstring> using namespace std; int ...
- 北京Uber优步司机奖励政策（3月11日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Unknown host 'services.gradle.org' 解决方法
报错如下: Unknown host 'services.gradle.org'. You may need to adjust the proxy settings in Gradle. Learn ...
- SpringBoot 基于lettuce 连接池 配置redis多数据源操作 生产配置
添加pom<dependency> <groupId>org.apache.commons</groupId> <artifactId>commons- ...
- 海思NB-IOT的SDK看门狗的使用
1. 看门狗需要喂狗,如果自己写的任务一直运行,那么空闲任务无法运行会导致看门狗复位,来看下看门狗的机制,首先系统启动的时候创建了空闲任务 在这个函数里面void vTaskStartSchedule ...
- 2019年猪年海报PSD模板-第三部分
14套精美猪年海报,免费猪年海报,下载地址:百度网盘,https://pan.baidu.com/s/15m6sWTdDzuBfdmHYxJVvbA
- unity中虚拟摇杆的实现
实现效果: 实现: 使用NGUI添加虚拟摇杆背景和其子物体按钮,为按钮Attach boxcollider和ButtionScript.为按钮添加如下脚本: 注意:其中的静态属性可以在控制物体移动的 ...
- Vue 编程之路（三）—— Vue 中子组件在父组件的 v-for 循环里，父组件如何调取子组件的事件
(标题的解决方案在第二部分) 最近公司的一个项目中使用 Vue 2.0 + element UI 实现一个后台管理系统的前端部分,属于商城类型. 一.前期思路: 其中在“所有订单”页面,UI 给的设计 ...
- [Clr via C#读书笔记]Cp11事件
Cp11事件 类型之所以提供事件通知功能,是因为类型维护了一个已登记方法的列表,事件发生后,类型将通知列表登记的所有方法: 事件模型建立在委托的基础上.委托是调用回调方法的一种类型安全的方式. 设计事 ...