weui/src/example/tabbar/tabbar.html

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

<div class="page">
    <div class="page__bd" style="height: 100%;">
        <div class="weui-tab">
            <div id="panel1" role="tabpanel" aria-labelledby="tab1" class="weui-tab__panel">Lorem repellat eius consectetur ab pariatur! Facere cum dignissimos sequi error perferendis quis Ipsa reiciendis earum cumque reprehenderit tenetur ab vero modi. Soluta tempore minima tempora quae voluptate! Sunt delectus?</div>
            <div id="panel2" role="tabpanel" aria-labelledby="tab2" class="weui-tab__panel" style="display:none">Dolor eum rerum magnam voluptatem omnis fuga, dolore libero quibusdam cupiditate Sequi vero rem corrupti hic veritatis Atque exercitationem odit odit ducimus esse, sapiente laborum inventore! Ipsum harum quo minus</div>
            <div id="panel3" role="tabpanel" aria-labelledby="tab3" class="weui-tab__panel" style="display:none">Elit deserunt dolore nemo harum neque libero numquam, minima nam Atque nesciunt iusto aperiam eligendi praesentium ratione? Quasi iste odio itaque doloribus hic? Est aliquam recusandae dolore ratione quos. Saepe</div>
            <div id="panel4" role="tabpanel" aria-labelledby="tab4" class="weui-tab__panel" style="display:none">Amet dignissimos doloribus voluptate maxime dolorem quia Deleniti eligendi similique nisi corrupti eius aut Unde nesciunt quos quos sapiente dolorem? Odit soluta repudiandae accusantium ducimus totam accusamus. Rem ad numquam</div>
            <div role="tablist" aria-label="选项卡标题" class="weui-tabbar">
                <div id="tab1" role="tab" aria-labelledby="t1_title" aria-describedby="t1_tips" aria-selected="true" aria-controls="panel1" class="weui-tabbar__item weui-bar__item_on">
                    <div id="t1_tips" aria-hidden="true" style="display: inline-block; position: relative;">
                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge" style="position: absolute; top: -2px; right: -13px;">8</span>
                    </div>
                    <p id="t1_title" aria-hidden="true" class="weui-tabbar__label">微信</p>
                </div>
                <div id="tab2" role="tab" aria-labelledby="t2_title" aria-selected="false" aria-controls="panel2" class="weui-tabbar__item">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <p aria-hidden="true" id="t2_title" class="weui-tabbar__label">通讯录</p>
                </div>
                <div id="tab3" role="tab" aria-labelledby="t3_title" aria-describedby="t3_tips" aria-selected="false" aria-controls="panel3" class="weui-tabbar__item">
                    <div id="t3_tips" aria-hidden="true" style="display: inline-block; position: relative;">
                        <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                        <span class="weui-badge weui-badge_dot" role="img" alt="new" style="position: absolute; top: 0; right: -6px;"></span>
                    </div>
                    <p id="t3_title" aria-hidden="true" class="weui-tabbar__label">发现</p>
                </div>
                <div id="tab4" role="tab" aria-labelledby="t4_title" aria-selected="false" aria-controls="panel4" class="weui-tabbar__item">
                    <img src="./images/icon_tabbar.png" alt="" class="weui-tabbar__icon">
                    <p class="weui-tabbar__label" aria-hidden="true" id="t4_title">我</p>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
        $('.weui-tabbar__item').on('click', function () {
            $(this).attr('aria-selected','true').addClass('weui-bar__item_on');
            $(this).siblings('.weui-bar__item_on').removeClass('weui-bar__item_on').attr('aria-selected','false');
            var panelId = '#' + $(this).attr('aria-controls');
            $(panelId).css('display','block');
            $(panelId).siblings('.weui-tab__panel').css('display','none');
        });
    });
</script>