Question

我想通过访问bootstrap药丸菜单中的下拉链接将用户返回到达的内容。

这个问题类似于this one - 但皱纹是当链接在下拉菜单中时该解决方案不起作用。

我有koppor的解决方案正常工作，因为它与药片本身有关，但是当我从下拉列表中访问内容时，我很难在刷新后返回相同的视图。

具体来说，当您从“杂项”菜单导航到“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>

欢迎任何/所有建议！

Answer 1

我有类似的问题。我做的是创建一个隐藏的选项卡。当页面加载首先转到该选项卡然后加载您真正想要加载的选项卡（哈希中的内容）。

编辑：我的想法不同。尝试将脚本更改为此。只要单击一个，就应该将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');

Bootstrap 3：返回页面刷新时的下拉选项卡

1 个答案: