第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 break;
20 case "梨":
21 alert("梨的价格是：1.5元");
22 break;
23 case "葡萄":
24 alert("葡萄的价格是：3元");
25 break;
26 default:
27 alert("今天没进货");
28 }
29 }
30 }
31 </script>
32 </head>
33 <body>
34 <input type="text" id="txt"><button id="btn">查询价格</button>
35 </body>
36 </html>4、下拉菜单
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <style>
7 body{
8 background-image: url(images/chun1.jpg);
9 }
10 </style>
11 <script>
12 window.onload=function(){
13 //获取元素
14 var sele=document.getElementById("sele");
15 sele.onchange=function(){
16 //alert(this.value);
17 switch(this.value){
18 case "1":
19 document.body.style.backgroundImage="url(images/chun1.jpg)";
20 break;
21 case "2":
22 document.body.style.backgroundImage="url(images/xia1.jpg)";
23 break;
24 case "3":
25 document.body.style.backgroundImage="url(images/qiu1.jpg)";
26 break;
27 case "4":
28 document.body.style.backgroundImage="url(images/dong1.jpg)";
29 break;
30 default:
31 document.body.style.backgroundImage="url(images/chun1.jpg)";
32 }
33 }
34
35 }
36 </script>
37 </head>
38 <body>
39 <select name="" id="sele">
40 <option value="1">春意绵绵</option>
41 <option value="2">夏日炎炎</option>
42 <option value="3">秋声瑟瑟</option>
43 <option value="4">白雪皑皑</option>
44 </select>
45 </body>
46 </html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读