第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学习笔记-反射（Reflection）
反射(Reflection) 反射是利用reflect包实现的 反射可大大提高程序的灵活性,使得interface{}有更大的发挥余地 反射使用TypeOf和ValueOf函数从接口中获取目标对象信息 ...
- HyperLedger Fabric 1.4 基础环境搭建（7）
学习了前面几章理论知识后,本章开始介绍实践操作,先介绍Fabric基础环境搭建,采用的操作系统为Centos 7 64位,依次介绍Docker安装.Docker-Compose安装.GO语言环境安装. ...
- CSS基础part1
CSS 概述CSS 指层叠样式表 (Cascading Style Sheets),样式定义了如何显示 HTML文件中的标签元素,CSS是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标 ...
- 20145209刘一阳 《网络对抗》Exp7 网络欺诈技术防范
20145209刘一阳 <网络对抗>Exp7 网络欺诈技术防范 一.应用SET工具建立冒名网站 要让冒名网站在别的主机上也能看到,需要开启本机的Apache服务,并且要将Apache服务的 ...
- 北京Uber优步司机奖励政策（1月18日）
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Python科学计算器（计算器）
说明 该计算器主要是为了练习正则表达式以及python基础所写:代码比较low! 运行过程 请输入你的计算公式, 计算器会将计算结果输出到屏幕上(此处会打印步骤); 退出(exit/quit) MyC ...
- java 编码二进制写法、十六进制用源代码表示
二进制: int a = 0b10; a其实=2 八进制: int a = 01; a其实=8 十六进制: int a = 0x1; a其实=16
- 10、Java并发编程：并发容器之ConcurrentHashMap
Java并发编程:并发容器之ConcurrentHashMap(转载) 下面这部分内容转载自: http://www.haogongju.net/art/2350374 JDK5中添加了新的concu ...
- wamp报错SCREAM:Error suppression ignored for
问题:SCREAM:Error suppression ignored for 解决: 在php.ini最下面加入scream.enabled = Off http://stackoverflow.c ...
- Python全栈 项目（HTTPServer、PiP使用）
pip是Python官方推荐的包管理工具 属于python的一部分 pip的使用 pip的安装 sudo apt-get install pyt ...