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

时间:2015-08-05 08:13:50

标签: jquery ajax jquery-ui model-view-controller callback

我Hava在页面重新加载后获得正确的选项卡有问题。我正在使用Bootstrap,require.js和Jquery来使其工作。我得到的是一条错误消息,上面写着:

未捕获的TypeError:$(...)。tab不是函数

我在Stackoverflow上看了很多,找到了很好的例子,但它只是告诉我这个标签不是一个功能。这是我的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"
                }
            ]
        }
    }
}

2 个答案:

答案 0 :(得分:0)

确保您只包含一次脚本和脚本顺序。当你试图调用&#34; tab&#34;时,似乎没有加载js。功能

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

答案 1 :(得分:0)

<强>答案

我忘了将bootstrap.js文件加载到我的require设置中。在我加载了所有工作之后。

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

谢谢!