Question

我有一个包含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>

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

Not Selected First Tab

首次加载页面时，它应该如下所示

How it Should Look

我尝试使用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>

然后点击＆＃34;显示输出＆＃34;，您将看到问题。

Answer 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文档：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;
});

甚至更好，尝试定位您的唯一身份#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>

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

1 个答案: