上一节我们说到如何在首页添加宫格，实现导流，如果对上一节的内容不清楚，欢迎动一下手，浏览之前的文章，那么我们今天要说的是如何在底部添加一个底部选项卡。
上一节文章快速入口
webapp的淘宝客系统开发-在首页添加宫格
我们这个webapp系统是基于PHP+mysql+MUI环境开发，如果不清楚如何搭建，欢迎留意咨询或者观看之前的文章。本节的效果如下：
那么，我们开始我们今天的课程
首先，我们在项目添加mui的字体文件，如下图
接着，我们在index.php首页添加我们的tab代码,主要有四个TAB选项。
<body>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#tabbar">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首页</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-chat">
<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
<span class="mui-tab-label">活动</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-contact">
<span class="mui-icon mui-icon-contact"></span>
<span class="mui-tab-label">社区</span>
</a>
<a class="mui-tab-item" href="#tabbar-with-map">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">设置</span>
</a>
</nav>
...
</body>
效果如下：
这里，我们还没有实现页面跳转，我们留着下一节再喂大家讲解一下，欢迎继续关注我的头条号：一点热,如果有什么问题，欢迎留言咨询，我看到之后会第一时间回复大家的。也欢迎收藏与转发，如果需要转载到其他网站，请与我联系，yeehot.com