底部工具栏

底部工具栏点击后,会自动切换对应的界面。底部工具栏每个按钮a的href="#tab1"中href指向的便是界面id,每个界面是一个.tab, 当前界面是.tab-active。每个tab对应一个url地址,当点击相关tab后会调转到相应的url地址上。

    <div class="tab-active" id="tab1" url="form.html"></div>
    <div class="tab" id="tab2" url="form.html"></div>
    <div class="tab" id="tab3" url="botton.html"></div>
    <div class="tab" id="tab4" url="list.html"></div>
    <div class="toolbar">
        <a class="tab-link tab-link-active col-25" href="#tab1">
            <i class="icon ion-home"></i>
            <span class="">首页</span>
        </a>
        <a class="tab-link col-25" href="#tab2">
            <i class="icon ion-home">
                <span class="badge bg_red">5</span>
            </i>
            <span class="">订单</span>
        </a>
        <a class="tab-link col-25" href="#tab3">
            <i class="icon ion-home"></i>
            <span class="">周边</span>
        </a>
        <a class="tab-link col-25" href="#tab4">
            <i class="icon ion-home"></i>
            <span class="">我的</span>
        </a>
    </div>
    <script>
        if(request.tab){
            t(".toolbar").tabClean().tabInit(request.tab); //清楚缓存后重新初始化tab
        }else{
            t(".toolbar").tabInit("tab1");
        }
    </script>

底部工具栏初始化:t(".toolbar").tabInit("tab1");。初始化参数,即设置当前tab页面。 底部工具栏删除缓存:t(".toolbar").tabClean();