第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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端小吉米

不再碎片化学习,快速掌握 H5 直播技术

48640
来自专栏web前端教室

不用那么多,每天一点点,学习React,贵在持之以恒

React,应该是目前前端领域最热的框架之一了,对于它的起源,现在我们大家应该都已经比较清楚了,它是fackbook搞出来的开源项目。它要解决的就是前端开发过程...

20090
来自专栏编程之旅

微信小程序——使用setData修改数组中的单个对象

微信小程序已经出来挺久的时间了,之前只是在文档上粗略的看了一下,最近稍得空闲,便利用微信小程序平台写一个练手的项目,顺便学习一下小程序开发,感觉大体跟前端开发基...

34420
来自专栏编程之路

7天从0到一个完整的小程序

如果你熟悉公众号开发的套路,那么入手小程序就很快了。如果你熟悉app开发,那入手也是很顺畅的,我认为关键在于移动开发思想。

29370
来自专栏木子昭的博客

红了绿了什么的最有意思了

在线展示地址: http://echarts.baidu.com/examples/editor.html?c=area-simple

13940
来自专栏做全栈攻城狮

电脑小白学习软件开发-C#语言基础之循环重点讲解,习题

本教程是基础教程,适合任何有志于学习软件开发的人。当然因为技术的连贯性,推荐按照顺序查看。

8020
来自专栏牛客网

腾讯暑期实习三面面经

回馈社会,腾讯暑期实习三面面经,正在等hr面试。。。 3.16 晚上8点 一面 电面 40分钟 1.自我介绍 2.position属性 比较 3.浮动清除 4....

426120
来自专栏编程

Immutable.js 到底值不值得用?

导语 我是一个前端开发人员,拥有四年工作经验,目前在一个大型软件团体里工作,制作一个以React框架和Redux库为基础建立起来的新单页程序。 创作一个前所未有...

48250
来自专栏练小习的专栏

抽象组件库的可行性讨论

首先这篇博文不是教程也不是研究技术技巧,这只是我对目前我正在着手写的一个组件库的一些想法,以及我对当前主流的这些css框架的一些看法。 当前的一些主流css框架...

23850
来自专栏从零开始学自动化测试

新手学习selenium路线图(老司机亲手绘制)

前言: 最近群里有不少小白,想入手selenium,但是一直没找到学习路线,还没入门就迷路了,于是小编亲手绘制了一幅学习路线图。希望能帮助小白快速入门,帮助已经...

40760

扫码关注云+社区

领取腾讯云代金券