TabBarButton

TabBarButton UI 提供与WeLink规范一致的菜单选项视图

    <div class="page">
        <div class="page__bd" style="height: 100%;">
            <div class="weui-tab">
                <div class="weui-tab__panel"></div>
                <div class="weui-tabbar">
                    <a href="javascript:;" class="weui-tabbar__text weui-tabbar__text_left weui-tabbar__text_blue">
                        文本
                    </a>
                    <a href="javascript:;" class="weui-tabbar__text weui-tabbar__text_right weui-tabbar__text_red">
                        文本
                    </a>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(function () {
            var off = ["message", "email", "contact", "business", "knowleage"];
            var on = ["messageCurrent", "emailCurrent", "contactCurrent", "businessCurrent", "knowleageCurrent"];
            $('.weui-tabbar__item').on('click', function () {
                var lastIndex = $('.weui-tabbar__item.weui-bar__item_on').index();
                $('.weui-tabbar__item.weui-bar__item_on').find(".icon-tab").removeClass("icon-tab-" + on[
                    lastIndex]).addClass("icon-tab-" + off[lastIndex]);
                var index = $(this).index();
                $($(this).find(".icon-tab")[0]).removeClass("icon-tab-" + off[index]).addClass("icon-tab-" +
                    on[index]);
                $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass(
                    'weui-bar__item_on');
            });
        });
    </script>