第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插件,实现了低 ...
随机推荐
- ACM数论-卡特兰数Catalan
Catalan 原理: 令h(0)=1,h(1)=1,catalan 数满足递归式: (其中n>=2) 另类递推公式: 该递推关系的解为: (n=1,2,3,...) 卡特兰数的应用实质上都是递 ...
- 12-oauth密码模式identity server4实现
1-服务端代码, 配置类,可加 RequireClientSecret=false, 这样调用端就不需要传入client_secret参数 using System.Collections; usin ...
- 西安Uber优步司机奖励政策（12月28日到1月3日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- php安全性问题
目录 常见攻击类型 1.sql注入: 2.xss攻击 3.csrf攻击: php安全三板斧:过滤输入.验证数据,以及转义输出. 1.数据过滤: 2.验证数据: 3.转义输出: laravel 中如何避 ...
- SpringBoot入门（四）——自动配置
本文来自网易云社区 SpringBoot之所以能够快速构建项目,得益于它的2个新特性,一个是起步依赖前面已经介绍过,另外一个则是自动配置.起步依赖用于降低项目依赖的复杂度,自动配置负责减少人工配置的工 ...
- android学习五 Intent
1.Intent是组件间调用的桥梁. 2.Android系统定义了很多Intent http://developer.android.com/guide/components/intents-c ...
- 使用union
QUERY: explain extended ) TRACE: { "steps": [ { "join_preparation": { "sele ...
- 【radio-group、radio】 单选项组件说明
radio-group组件是包裹radio组件的容器 原型: <radio-group bindchange="[EventHandle]"> <radio .. ...
- js如何判断客户端是iOS还是Android等移动终端
判断原理:JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来 ...
- yun rpm
RPM:RedHat Package Manager的简称,是一种数据库记录的方式的管理机制.当需要安装的软件的依赖软件都已经安装,则继续安装,否则不予安装. 特点:1.已经编译并打包完成2.软件的信 ...