底部工具栏

通过 .aui-bar-tab 来将工具栏定位到页面底部，通过 .aui-bar-tab-item 来定义菜单项，通过 .aui-active 来控制高亮。

提示

在移动端WEB网页中，包含底部工具栏的网页主体内容可以采用 iframe 嵌入、ajax 动态加载或者 a 链接跳转形式。
如果采用 iframe、ajax 方式需要注意浏览器返回按钮会直接跳出本页；
如果采用 a 链接方式需要注意多次点击后浏览器返回循环问题，a 链接可以将 .aui-bar-tab-item 所在的标签修改为 a 或者通过JS进行链接跳转

示例源码

<style type="text/css">
    #demo {
        width: 4rem;
        height: 4rem;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -2rem;
        margin-top: -2rem;
        background-color: #e0e0e0;
        border-radius: 50%;
        line-height: 4rem;
        text-align: center;
        color: #212121;
        font-size: 1.2rem;
    }
</style>

<div id="demo">1</div>
<footer class="aui-bar aui-bar-tab" id="footer">
    <div class="aui-bar-tab-item aui-active" tapmode>
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">首页</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <i class="aui-iconfont aui-icon-star"></i>
        <div class="aui-bar-tab-label">收藏</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-badge">99</div>
        <i class="aui-iconfont aui-icon-cart"></i>
        <div class="aui-bar-tab-label">购物车</div>
    </div>
    <div class="aui-bar-tab-item" tapmode>
        <div class="aui-dot"></div>
        <i class="aui-iconfont aui-icon-my"></i>
        <div class="aui-bar-tab-label">我的</div>
    </div>
</footer>
<script>
    (function () {
        var tabBarItem = document.getElementsByClassName('aui-bar-tab-item');
        for (var i in tabBarItem) {
            tabBarItem[i].index = i * 1 + 1; // 先乘再加，否则会变成01、11、21、31
            tabBarItem[i].onclick = function () {
                document.getElementById('demo').innerText = this.index;
                 document.querySelector(".aui-bar-tab-item.aui-active").classList.remove("aui-active");
                this.classList.add("aui-active");
            };
        }
    })()
</script>