如何在页面重新加载后使用 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($) {
谢谢!
我无法在页面重新加载后获取正确的选项卡。我正在使用 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($) {
谢谢!