H5移动开发底部导航-博客园老牛大讲堂

一、H5分类//博客园老牛大讲堂

  网页开发,移动开发,移动混合开发,

二、所用知识点://博客园老牛大讲堂

  APICloud:APICloud是为了开发APP的,所以如果用H5开发的移动端,需要发送短信,获取照相机等就要用APICloud的了。

  aui框架:aui框架就是专门开发移动端的框架。

三、怎样用H5开发移动端?//博客园老牛大讲堂

我建议如果用H5开发移动端,全都用H5网页开发。如果涉及到发送短信和照相等操作,再用APICoud开发。

<!doctype html>
<html>
//博客园老牛大讲堂
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
        <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
        <link rel="stylesheet" type="text/css" href="../../css/api.css" />
        <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    </head>

    <body>
      //博客园老牛大讲堂 <div id="tbodyCenter"> </div> <footer class="aui-nav" id="footer" style="border-top: 1px solid #dbdbdb;z-index:9"> <ul class="aui-bar-tab" id="parent"> <li > <img src="../../image/main_2.png" style=" 25px;padding-top: 5px;" /> <p class="aui-text-danger"> 首页 </p> </li> <li> <img src="../../image/mall.png" style=" 25px;padding-top: 5px;" /> <p> 发现 </p> </li> <li> <img src="../../image/find.png" style=" 25px;padding-top: 5px;" /> <p> 收藏 </p> </li> <li > <img src="../../image/user.png" style=" 25px;padding-top: 5px;" /> <p> 我的 </p> </li> </ul> </footer>
     </body> <script type="text/javascript" src="../../script/api.js"></script> <script type="text/javascript" src="../../js/jquery-3.0.0.min.js" ></script> <script type="text/javascript"> var listfont=document.getElementById("parent").getElementsByTagName("p"); var listimg=document.getElementById("parent").getElementsByTagName("img"); var listli=document.getElementById("parent").children; for(var i=0;i<listli.length;i++) { listli[i].index=i; listli[i].onclick=function(i) { initimg();//初始化img initfont(listli.length);//初始化font switchImg(this.index);//改变图片 listfont[this.index].className="aui-text-danger";//改变font panduan(this.index); }; }; function initimg(){ listimg[0].setAttribute("src","../../image/main.png"); listimg[1].setAttribute("src","../../image/mall.png"); listimg[2].setAttribute("src","../../image/find.png"); listimg[3].setAttribute("src","../../image/user.png"); } function initfont(index) { for(var i=0;i<index;i++) { listfont[i].className=""; } } function switchImg(index){ switch(index){ case 0: listimg[0].setAttribute("src","../../image/main_2.png"); break; case 1: listimg[1].setAttribute("src","../../image/mall_2.png"); break; case 2: listimg[2].setAttribute("src","../../image/find_2.png"); break; case 3: listimg[3].setAttribute("src","../../image/user_2.png"); break; } } function panduan(index){ switch(index){ case 0: $("#tbodyCenter").load("../first/first.html"); break; case 1: break; case 2: break; case 3: $("#tbodyCenter").load("../fourth/my.html"); break; } } </script> //博客园老牛大讲堂 </html>

 四、效果截图//博客园老牛大讲堂

其中红色的是红色的图片,没有红色的也是图片。

原文地址:https://www.cnblogs.com/laonniudajiangtang/p/5848289.html