第28天：js-Tab栏切换封装函数
Posted 半指温柔乐
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第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切换封装
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Tab切换封装</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 405px; 13 height: 400px; 14 border:1px solid #c1c1c1; 15 margin: 100px auto; 16 /*overflow: hidden;*/ 17 } 18 .mt span{ 19 display: inline-block; 20 width: 80px; 21 height: 30px; 22 text-align: center; 23 line-height: 30px; 24 background-color: #ff4400; 25 border-right: 1px solid #c1c1c1; 26 cursor: pointer; 27 } 28 .mt .current{ 29 background-color: #3B90CD; 30 } 31 .mb li{ 32 width: 100%; 33 height: 370px; 34 background-color: #3B90CD; 35 list-style: none; 36 display: none; 37 } 38 .mb .show{ 39 display: block; 40 } 41 </style> 42 <script> 43 window.onload=function(){ 44 function tab(obj){ 45 //获取每个盒子的id 46 var target=document.getElementById(obj); 47 //获取对应id下的标签 48 var spans=target.getElementsByTagName("span"); 49 var lis=target.getElementsByTagName("li"); 50 for(var i=0;i<spans.length;i++){ 51 spans[i].index=i;//设置索引号 52 spans[i].onmouseover=function(){ 53 for(var j=0;j<spans.length;j++){ 54 //清除所有的 类 55 spans[j].className=""; 56 lis[j].className=""; 57 } 58 //显示当前点击的类 59 this.className="current"; 60 lis[this.index].className="show";//li利用spans.index,span和li对应起来 61 } 62 } 63 } 64 tab("one"); 65 tab("two"); 66 tab("three"); 67 } 68 </script> 69 </head> 70 <body> 71 <div class="box" id="one"> 72 <div class="mt"> 73 <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span> 74 </div> 75 <div class="mb"> 76 <ul> 77 <li class="show">新闻模块</li> 78 <li>体育模块</li> 79 <li>娱乐模块</li> 80 <li>科技模块</li> 81 <li>视频模块</li> 82 </ul> 83 </div> 84 </div> 85 86 <div class="box" id="two"> 87 <div class="mt"> 88 <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span> 89 </div> 90 <div class="mb"> 91 <ul> 92 <li class="show">新闻模块</li> 93 <li>体育模块</li> 94 <li>娱乐模块</li> 95 <li>科技模块</li> 96 <li>视频模块</li> 97 </ul> 98 </div> 99 </div> 100 101 <div class="box" id="three"> 102 <div class="mt"> 103 <span class="current">新闻</span><span>体育</span><span>娱乐</span><span>科技</span><span>视频</span> 104 </div> 105 <div class="mb"> 106 <ul> 107 <li class="show">新闻模块</li> 108 <li>体育模块</li> 109 <li>娱乐模块</li> 110 <li>科技模块</li> 111 <li>视频模块</li> 112 </ul> 113 </div> 114 </div> 115 </body> 116 </html>
运行结果：
2、三种循环语句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三个循环语句</title> 6 <script> 7 window.onload=function(){ 8 //for循环 9 var sum=0; 10 for(var i=1;i<=100;i++){ 11 sum+=i; 12 } 13 console.log(sum); 14 15 //while循环 16 var j=1; 17 var sum1=0; 18 while(j<=100){ 19 sum1+=j; 20 j++; 21 } 22 console.log(sum1); 23 24 //do-while循环，至少执行一次 25 var k=1; 26 var sum2=0; 27 do{ 28 sum2+=k; 29 k++; 30 } 31 while(k<=100) 32 console.log(sum2); 33 34 } 35 </script> 36 </head> 37 <body> 38 39 </body> 40 </html>
3、多分支switch语句
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>多分支语句switch</title> 6 <script> 7 window.onload=function(){ 8 //获取元素 9 var txt=document.getElementById("txt"); 10 var btn=document.getElementById("btn"); 11 btn.onclick=function(){ 12 var val=txt.value; 13 switch(val){ 14 case "苹果": 15 alert("苹果的价格是：5元"); 16 break; 17 case "香蕉": 18 alert("香蕉的价格是：2元"); 19 breakAndroid中切换标签片段之间的延迟