bootstrap中刷新页面，tab页选中不改变。

最新推荐文章于 2024-05-16 11:57:58 发布

baicp3

最新推荐文章于 2024-05-16 11:57:58 发布

阅读量1.6w

点赞数 3

分类专栏： bootstrap

本文链接：https://blog.csdn.net/baicp3/article/details/41048731

版权

bootstrap 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

直接拷贝本人代码即可注意在同级目录下引用相应的js 和 css。

能实现tab效果关键看bootstrap的 data-toggle= tab

<html lang="en">
<head>
<meta charset="UTF-8">
    <link rel="stylesheet" href="bootstrap.min.css">
    <script src="jquery-1.11.1.min.js"></script>
    <script src="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>

baicp3

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
5
评论
bootstrap中刷新页面，tab页选中不改变。

直接拷贝本人代码即可注意在同级目录下引用相应的js 和 css。能实现tab效果关键看bootstrap的 data-toggle= tab $(document).ready(function() { if(location.hash) { $('a[href=' + location.hash
复制链接

扫一扫