分享

bootstrap 选项卡,刷新,不切换选项卡,仍停留在当前选项卡

 黄三岁大爱人生 2019-10-24

<html lang='en'>
<head>
<meta charset='UTF-8'>
    <link rel='stylesheet' href='http://beta.panda.qq.com/static/onhold/bootstrap/css/bootstrap.min.css'>
    <script src='http://beta.panda.qq.com/static/onhold/js/jquery-1.11.2.min.js'></script>
    <script src='http://beta.panda.qq.com/static/onhold/bootstrap/js/bootstrap.min.js'></script>
<script>

$(document).ready(function() {
    if(location.hash) {
        $('a[href=' + location.hash + ']').tab('show');
    }
    $(document.body).on('click', 'a[data-toggle]', function(event) {
        location.hash = this.getAttribute('href');
    });
});
$(window).on('popstate', function() {
    var anchor = location.hash || $('a[data-toggle=tab]').first().attr('href');
    $('a[href=' + anchor + ']').tab('show');
});
</script>
</head>
<body>

<ul class='nav nav-tabs' id='myTab'>
    <li class='active'><a data-toggle='tab' href='#home'>Home</a></li>
    <li><a data-toggle='tab' href='#profile'>Profile</a></li>
    <li><a data-toggle='tab' href='#messages'>Messages</a></li>
    <li><a data-toggle='tab' href='#settings'>Settings</a></li>
</ul>

<div class='tab-content'>
    <div class='tab-pane active' id='home'>home</div>
    <div class='tab-pane' id='profile'>profile</div>
    <div class='tab-pane' id='messages'>messages</div>
    <div class='tab-pane' id='settings'>settings</div>
</div>

</body>
</html>

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多