我目前在我的Web应用程序中使用jQuery、Twitter Bootstrap和CanJS。我正在尝试使用CanJS实现路由。我正在使用Bootstrap的选项卡,当我单击选项卡时,它应该显示#tabSearch、#tabUser或#tabPermissions,但哈希返回为空字符串。
我使用以下代码来更改选项卡:
这里是HTML部分:
我使用以下代码来更改选项卡:
TabControl = can.Control.extend({}, {
init: function (element, options) {
element.find('a[href="' + options.defaultTab + '"]').tab('show');
this.userSearch = null;
this.userForm = null;
}
, 'a[data-toggle="tab"] show': function (e) {
this.options.tabChangeCallback(e);
}
});
UserTab = new TabControl('#tabctrlUser', {
defaultTab: '#tabSearch',
tabChangeCallback: function (e) {
if (e.context.hash == '#tabSearch') {
if (!this.userSearch) {
this.userSearch = new FormUserQuery('#tabSearch', {});
}
} else if (e.context.hash == '#tabUser') {
if (!this.userForm) {
this.userForm = new FormUser('#tabUser', {});
}
this.userForm.renderView(currentUser);
} else if (e.context.hash == '#tabPermissions') {
new FormPermissions('#tabPermissions', {});
}
}
});
这里是HTML部分:
<ul id="tabctrlUser" class="nav nav-tabs">
<li><a href="#tabSearch" data-toggle="tab">Pesquisar</a></li>
<li><a href="#tabUser" data-toggle="tab">Cadastrar/Alterar</a></li>
<li><a href="#tabPermissions" data-toggle="tab">Acessos</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="tabSearch"></div>
<div class="tab-pane" id="tabUser"></div>
<div class="tab-pane" id="tabPermissions"></div>
</div>
e.target
或e.srcElement
的东西。当您单击<a href="#tabSearch"...
锚点时 - 这将是此元素,并通过读取其href
属性,您应该获得“#tabSearch”。 - Yuriy Galanter