如何在页面重新加载后使用 bootstrap 保持当前选项卡处于活动状态?

How to keep current tab active with bootstrap after a page reload?

我无法在页面重新加载后获取正确的选项卡。我正在使用 Bootstrap、require.js 和 Jquery 来使其工作。我得到的只是一条错误消息:

未捕获类型错误:$(...).tab 不是函数

我在 Whosebug 上看了很多,找到了很好的例子,但它只是告诉我那个选项卡不是一个函数。这是我的 Jquery 代码:

 $(function () {
            $('a[data-toggle="tab"]').on('shown', function () {

                localStorage.setItem('lastTab', $(this).attr('href'));
            });

            //go to the latest tab, if it exists:
            var lastTab = localStorage.getItem('lastTab');
            if (lastTab) {
                $('a[href=' + lastTab + ']').tab('show');
            }
            else {
                // Set the first tab if cookie do not exist
                $('a[data-toggle="tab"]:first').tab('show');
            }
        });

我猜是 jquery 或 Jquery UI。有什么建议么?

编辑:

捆绑包:

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-1.11.3.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.unobtrusive-ajax.js",
                    "~/Scripts/jquery.validate-vsdoc.js",
                    "~/Scripts/jquery.validate.min.js",
                    "~/Scripts/jquery.validate.unobtrusive.js",
                    "~/Scripts/jquery.validate.unobtrusive.min.js"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-*"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
                  "~/Scripts/jquery.dataTables.js"));

        bundles.Add(new StyleBundle("~/bundles/css").Include(
                  "~/Content/css/merchantportal.css",
                  "~/Content/css/style.css",
                  "~/Content/css/jquery.dataTables.css",
                  "~/Content/css/bootstrap.css"));

        // Set EnableOptimizations to false for debugging. For more information,
        // visit http://go.microsoft.com/fwlink/?LinkId=301862
        BundleTable.EnableOptimizations = false;
    }

加载:

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jqueryval")
    @Styles.Render("~/bundles/css")
    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/scripts")
</head>
<body>

要求:

{
    "paths": {
        "jquery": "jquery-1.11.3",
        "datatables": "jquery.dataTables",
        "bootstrap": "bootstrap",
        "datatable-module": "datatable-module",
        "jquery.validate": "jquery.validate",
        "jquery-ui" :  "jquery-ui"
    },

    "shim": {
        "bootstrap": {
            "deps": [ "jquery" ]
        }
    },

    "autoBundles": {
        "public-app": {
            "outputPath": "Scripts/Bundles/",
            "include": [
                {
                    "directory": "Controllers/Root"
                }
            ]
        }
    }
}

确保只包含一次脚本和脚本顺序。当您尝试调用 "tab" 函数时,似乎没有加载 js。

您是否尝试在第一个包中加载 jquery 两次?

回答

我忘记将 bootstrap.js 文件加载到我的需求设置中。在我加载它之后一切正常。

define(['jquery','jquery-ui','bootstrap', 'jquery.validate', 'datatable-module'], function($) {

谢谢!