weui
Version:
A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
32 lines (31 loc) • 2.21 kB
HTML
<div class="page">
<div class="page__bd" style="height: 100%;">
<div class="weui-tab">
<div class="weui-navbar">
<div role="tab" aria-selected="true" aria-controls="panel1" id="tab1" class="weui-navbar__item weui-bar__item_on">
选项一
</div>
<div role="tab" aria-controls="panel2" id="tab2" class="weui-navbar__item">
选项二
</div>
<div role="tab" aria-controls="panel3" id="tab3" class="weui-navbar__item">
选项三
</div>
</div>
<div role="tabpanel" id="panel1" aria-labelledby="tab1" class="weui-tab__panel">Sit sit quibusdam assumenda facilis magnam temporibus? Molestiae qui ad accusantium minus mollitia Esse maiores voluptates suscipit fugit veritatis numquam repellat omnis. Dolores facilis deleniti reiciendis ea beatae Quaerat soluta</div>
<div style="display: none;" role="tabpanel" id="panel2" aria-labelledby="tab2" class="weui-tab__panel">Consectetur neque facere modi recusandae tempore. Sit repellendus qui voluptatibus voluptas porro perspiciatis. Incidunt iusto soluta esse ipsum ex. Consectetur blanditiis dolor facere dignissimos minus quam libero? Nemo voluptas aperiam?</div>
<div style="display: none;" role="tabpanel" id="panel3" aria-labelledby="tab3" class="weui-tab__panel">Dolor magnam expedita ex beatae maiores assumenda Doloribus et totam numquam officiis beatae Sint eos saepe magnam error aut Doloremque necessitatibus eligendi quod fuga debitis. Error ad optio repellendus amet.</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
$('.weui-navbar__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>