页面导航上的自动选择选项卡答案

【问题标题】：Auto Select Tab on Page Navigation页面导航上的自动选择选项卡
【发布时间】：2014-12-31 04:20:48
【问题描述】：

我有一个包含 Twitter Bootstrap nav nav-pills 控件的视图。这嵌入得很好，并且我计划在我的每个选项卡中嵌入两个部分视图。下面是剃刀视图

@using SiteNET.Models;
@using Microsoft.AspNet.Identity;
@model SiteNET.Models.ManageUserViewModel
@{
    ViewBag.Title = "Manage Account";
}
<style type="text/css">
    .manage {
        margin: 20px;
    }
</style>
<div class="manage">
    <ul class="nav nav-pills" id="myTab">
        <li><a data-toggle="tab" href="#manage">Manage Account</a></li>
        <li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
    </ul>
    <div class="tab-content">
        <div id="manage" class="tab-pane active fade in">
            <h2>@ViewBag.Title</h2>
            <p class="text-success">@ViewBag.StatusMessage</p>
            @*<div class="alert alert-success"
            data-toggle="collapse"
            role="alert">@ViewBag.StatusMessage</div>*@
            <div class="row">
                <div class="col-md-12">
                    @Html.Partial("_ChangeEmailAddressPartial", Model)
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    @if (ViewBag.HasLocalPassword)
                    {
                        @Html.Partial("_ChangePasswordPartial")
                    }
                    else
                    {
                        @Html.Partial("_SetPasswordPartial")
                    }
                </div>
            </div>
            @section Scripts {
                @Scripts.Render("~/bundles/jqueryval")
            }
        </div>
        <div id="downloads" class="tab-pane fade">
            <h3>Downloads</h3>
            <p>Avalible downloads partial view.</p>
        </div>
    </div>
</div>

问题是当页面加载时显示第一个选项卡的内容但未选择实际选项卡（见下文）

第一次加载页面时应该是这样的

我尝试使用this solution，它使用下面的JavaScript

<script>
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    // Store the currently selected tab in the hash value
    $("ul.nav-tabs > 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>

但这似乎不起作用（即，加载页面时似乎没有选择第一个选项卡）。它也不存储选定的选项卡。我该怎么办

在第一次加载页面时让第一个选项卡显示为选中状态？
如何修改上面的 JS 以使选定的选项卡在页面导航之间保持不变？

感谢您的宝贵时间。

要自己查看此问题，请转到CodeLAB 并粘贴

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Pills Nav with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
    <script>
    //$('#myTab a[href="manage"]').tab('show');
    $('#myTab a').click(function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    // Store the currently selected tab in the hash value
    $("ul#myTab > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    //$("ul.nav-tabs > 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>
    <div class="manage">
        <ul class="nav nav-pills" id="myTab">
            <li><a data-toggle="tab" href="#manage">Manage Account</a></li>
            <li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
        </ul>
        <div class="tab-content">
            <div id="manage" class="tab-pane active fade in">
                <h2>Manage</h2>
                <p class="text-success">Success</p>
                <div class="row">
                    <div class="col-md-12">
                        <p>Partial view A</p>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <p>Partial view B</p>
                    </div>
                </div>
            </div>
            <div id="downloads" class="tab-pane fade">
                <h3>Downloads</h3>
                <p>Avalible downloads partial view.</p>
            </div>
        </div>
    </div>
</body>
</html>

然后点击“显示输出”，就会看到问题了。

【问题讨论】：

我更新了答案。

标签： asp.net twitter-bootstrap razor tabs asp.net-mvc-5

【解决方案1】：

我没有使用 asp 的经验，但是对于 bootstrap / jQuery 部分，我猜你的解决方案是这样的：

1.) 给你想要激活的li 类.active。例如：

<li class="active"><a data-toggle="tab" href="#manage">Manage Account</a></li>

与相应的内容元素相同，就像您已经做的那样。

<div id="manage" class="tab-pane active fade in">xxx</div>

仔细查看相应的引导文档：Bootstrap Tabs

2.) 我猜它不起作用，因为您的脚本针对错误的元素 (ul.nav-tabs)，该元素在您的代码中不存在。据我从您的代码中可以看出，您使用的是 .nav-pills。所以试试：

$("ul.nav-pills > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
});

或者更好的是，尝试定位您的唯一 ID #myTab，如下所示：

$("ul#myTab > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
});

如果这对您没有帮助或提示您正确的方向，请尝试为您生成的 html 输出创建一个工作小提琴，以便我们可以仔细查看您的代码。

更新

试试这个代码。它在我的本地主机上非常适合我。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap 3 Pills Nav with Icons</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<style type="text/css">
    .bs-example{
        margin: 20px;
    }
</style>
</head>
<body>
<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>
<div class="manage">
    <ul class="nav nav-pills" id="myTab">
        <li class="active"><a data-toggle="tab" href="#manage">Manage Account</a></li>
        <li><a data-toggle="tab" href="#downloads">Avalible Downloads</a></li>
    </ul>
    <div class="tab-content">
        <div id="manage" class="tab-pane active fade in">
            <h2>Manage</h2>
            <p class="text-success">Success</p>
            <div class="row">
                <div class="col-md-12">
                    <p>Partial view A</p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <p>Partial view B</p>
                </div>
            </div>
        </div>
        <div id="downloads" class="tab-pane fade">
            <h3>Downloads</h3>
            <p>Avalible downloads partial view.</p>
        </div>
    </div>
</div>

【讨论】：

非常感谢您的帮助。我已经进行了更改，但这些似乎没有帮助。我已经用可以粘贴到 CodeLAB 的代码更新了问题。
因为<li class="active"> 而不是脚本，这可以工作并选择默认选项卡项。我创建的脚本用于在您导航时恢复选定的选项卡。从和返回到页面。这仍然不起作用，我不知道为什么。但是，我可以忍受没有恢复标签位置的情况，所以会接受你的回答，非常感谢你的时间。
您是否尝试过服务器上空白 html 文件中的代码？因为location 更改在codelab 等在线编辑器中不起作用。正如我所说，对我来说它适用于我的本地主机..
我确实在 VS2013 中尝试过，但使用的是本地数据库（“LocalDB”）。我还没有在服务器上得到这个网站...