引导程序3:返回页面刷新的下拉选项卡

Bootstrap 3: return to dropdown tab on page refresh

本文关键字：选项 刷新 返回 引导程序      更新时间：2023-10-17

我想让用户返回到通过从引导程序药丸菜单访问下拉链接所访问的内容。

这个问题与这个问题类似，但问题是，当链接位于下拉菜单中时，该解决方案不起作用。

我认为koppor的解决方案运行良好，因为它与药丸本身有关，但当从下拉菜单访问内容时，我不知道如何在刷新后返回到同一视图。

具体而言，当您从"Misc"菜单导航到"xxx"或"yyy"内容，然后刷新页面时，页面默认为"主页"内容（即使"Misc（其他）"按钮仍处于活动状态）。

<ul class="nav nav-pills" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#misc">Misc<span class="caret"></span></a>
    <ul class="dropdown-menu">
    <li><a class="dropdown-toggle" href="#more_x" data-toggle="pill">xxx</a></li>
    <li><a class="dropdown-toggle" href="#more_y" data-toggle="pill">yyy</a></li>
    </ul>
</li>
<li><a href="#messages">Messages</a></li>
    <li><a 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="more_x">more info x</div>
    <div class="tab-pane" id="more_y">more info y</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>
<script>
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });
    // store the currently selected tab in the hash value
    $("ul.nav-pills > li > a").on("shown.bs.tab", function (e) {
       var id = $(e.target).attr("href").substr(1);
       window.location.hash = id;
    });
    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
</script>

欢迎任何/所有建议！

我也遇到了类似的问题。我所做的是创建一个隐藏的选项卡。当页面加载时，先转到该选项卡，然后加载你真正想要加载的选项卡（你的哈希中有什么）。

编辑：我有不同的想法。尝试将脚本更改为此。每当单击window.location.hash时，它都应该将其设置为活动选项卡。

$('#myTab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
    window.location.hash = $(this).attr("href");
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');
相关文章：