一、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>
四、效果截图//博客园老牛大讲堂
其中红色的是红色的图片，没有红色的也是图片。
