首页 > 其他 > 详细

bootstrap Tab页切换

时间:2019-12-04 17:25:08      阅读:278      评论:0      收藏:0      [点我收藏+]
<ul class="nav nav-tabs" id="otherInfoTab">
    <li class="active"><a href="#time_line">时间轴</a></li>
    <li><a href="#complain">投诉</a></li>
    <li><a href="#sms_send">短信回评</a></li>
    <li><a href="#order_path">订单轨迹</a></li>
    <li><a href="#order_paths">xxx</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="time_line">111</div>
    <div class="tab-pane" id="complain">222</div>
    <div class="tab-pane" id="sms_send">333</div>
    <div class="tab-pane" id="order_path">444</div>
    <div class="tab-pane" id="order_paths">zz</div>
</div>

<script>
    $(function () {
        $(#otherInfoTab a:last).tab(show);//初始化显示哪个tab

        $(#otherInfoTab a).click(function (e) {
            e.preventDefault();//阻止a链接的跳转行为
            $(this).tab(show);//显示当前选中的链接及关联的content
        })
    })
</script>

 

bootstrap Tab页切换

原文:https://www.cnblogs.com/rxbook/p/11984184.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!