第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插件,实现了低 ...

随机推荐

SVN的使用——下载、安装
今天我们来学习一下如何使用SVN(Subversion) 既然要使用SVN那么我们就先来认识一下SVN.SVN的全名是Subversion,它是一个自由,开源的版本控制系统.在Subversion管理 ...
php post
post form function post($remote_server,$data,$second=60){ $ch = curl_init();if(is_string($data)){ $t ...
Windows运行机理——API与SDK
Windows运行机理这系列文章都是来至于<零基础学Qt4编程>——吴迪,个人觉得写得很好,所以搬运加以整理. 首先 API:Application Programmaing Interf ...
征战 OSG-序及目录
其实很早就应该写这个了,一直拖到现在就是因为懒啊. 自从七月演习回来,被划到三维平台开发部,就一直混日子,也没人带领,也没人问结果,就这么一直堕落下来了,直到有一天才发现自己也看不上自己了,觉得自己这 ...
POSTMan 快速上手（一图带你玩 Postman ）
POSTMan 快速上手(一图带你玩 Postman ):
Python 多线程、进程、协程上手体验
浅谈 Python 多线程.进程.协程上手体验前言:浅谈 Python 很多人都认为 Python 的多线程是垃圾(GIL 说这锅甩不掉啊~):本章节主要给你体验下 Python 的两个库 Thre ...
互联网行业求职课-教你进入BAT
互联网行业求职课--教你进入BAT 课时1. 课程内容介绍.导师介绍.服务安排和介绍等课时2. 互联网行业.职业选择指导互联网公司选择: 大公司:收获:大平台,系统思维,系统培训,系统性的发展,薪 ...
java后台接受web前台传递的数组参数
前台发送:&warning_type[]=1,2 &warning_type=1,2 后台接收:(@RequestParam(value = "param[]") ...
Spring ApplicationContext 简介
ApplicationContext是对BeanFactory的扩展,实现BeanFactory的所有功能,并添加了事件传播,国际化,资源文件处理等. configure locations:(C ...
Python常用函数--return 语句
在Python教程中return 语句是函数中常用的一个语句.return 语句用于从函数中返回,也就是中断函数.我们也可以选择在中断函数时从函数中返回一个值.案例(保存为 function_retu ...

第28天：js-Tab栏切换封装函数

第28天：js-Tab栏切换封装函数的更多相关文章

随机推荐

热门专题