jQuery选项卡-获取新选择的索引
jQuery tabs - getting newly selected index
我以前使用过jquery-ui tabs
扩展通过ajax
加载页面片段,并在页面中隐藏或显示隐藏的div
。这两种方法都有很好的文档记录,我在那里没有遇到任何问题。
然而,现在,我想对选项卡做一些不同的事情。当用户选择一个选项卡时,它应该完全重新加载页面-原因是每个选项卡部分的内容渲染起来有些昂贵,所以我不想一次发送所有内容,并使用切换"display:none"的正常方法来显示它们。
我的计划是拦截选项卡的select
事件,并通过操作document.location.使该函数重新加载页面
在select
处理程序中,如何获取新选择的选项卡索引及其对应的htmlLI对象?
$('#edit_tabs').tabs( {
selected: 2, // which tab to start on when page loads
select: function(e, ui) {
var t = $(e.target);
// alert("data is " + t.data('load.tabs')); // undef
// alert("data is " + ui.data('load.tabs')); // undef
// This gives a numeric index...
alert( "selected is " + t.data('selected.tabs') )
// ... but it's the index of the PREVIOUSLY selected tab, not the
// one the user is now choosing.
return true;
// eventual goal is:
// ... document.location= extract-url-from(something); return false;
}
});
我可以读取事件或ui对象的某个属性,该属性将给出新选择的选项卡或其中的锚标记的索引、id或对象吗?
或者有没有更好的方法来使用选项卡重新加载整个页面?
我会看看Tabs的事件。以下内容摘自jQuery文档:
$('.ui-tabs-nav').bind('tabsselect', function(event, ui) {
ui.options // options used to intialize this widget
ui.tab // anchor element of the selected (clicked) tab
ui.panel // element, that contains the contents of the selected (clicked) tab
ui.index // zero-based index of the selected (clicked) tab
});
看来ui.tab是最好的选择。
在jQuery UI-v1.9.2 中
ui.newTab.index()
获取活动选项卡的基本0索引
select: function(e, ui){var index=ui.index;}
对我来说效果很好。请参阅:http://api.jqueryui.com/tabs/#events
谢谢,jobsry-你指出的"ui.tab"给了我点击的锚标记,我可以从中提取它的class、id、href等……我选择使用id来编码我的url。我的最后一个tabs()调用如下:
$(document).ready(function() {
$('#edit_tabs').tabs( {
selected: [% page.selected_tab ? page.selected_tab : 0 %],
select: function(e, ui) {
// ui.tab is an 'a' object
// it has an id of "link_foo_bar"
// transform it into http://....something&cmd=foo-bar
var url = idToTabURL(ui.tab.id);
document.location = url;
return false;
}
}).show();
});
或者我在网站上使用的另一个选项是这个。这是一个基本的UL/Div选项卡导航系统。在点击带有哈希标记的另一个页面的链接时,触发正确标签的关键是简单地通过UL筛选与通过浏览器传递的内容相匹配的#示例。就是这样。
以下是示例HTML:
<div id="tabNav">
<ul class="tabs">
<li><a href="#message">Send a message</a></li>
<li><a href="#shareFile">Share a file</a></li>
<li><a href="#arrange">Arrange a meetup</a></li>
</ul>
</div>
<div id="tabCont">
<div id="message">
<p>Lorem ipsum dolor sit amet.</p>
</div>
<div id="shareFile">
<p>Sed do eiusmod tempor incididunt.</p>
</div>
<div id="arrange">
<p>Ut enim ad minim veniam</p>
</div>
</div>
以及实现这一目标的Jquery:
$(document).ready(function() {
$(function () {
var tabs = [];
var tabContainers = [];
$('ul.tabs a').each(function () {
// note that this only compares the pathname, not the entire url
// which actually may be required for a more terse solution.
if (this.pathname == window.location.pathname) {
tabs.push(this);
tabContainers.push($(this.hash).get(0));
}
});
$(tabs).click(function () {
// hide all tabs
$(tabContainers).hide().filter(this.hash).show();
// set up the selected class
$(tabs).removeClass('active');
$(this).addClass('active');
return false;
});
$(tabs).filter(window.location.hash ? '[hash=' + window.location.hash + ']' : ':first').click();
});
});
这应该会帮你解决的。我知道这不是最干净的代码,但它会让你达到目的。
在我的实现中,它的工作方式如下:
$(document).ready(function() {
$('#edit_tabs').tabs( {
selected: [% page.selected_tab ? page.selected_tab : 0 %],
select: function(e, ui) {
// ui.tab is an 'a' object
var url = ui.tab.href;
document.location = url;
return false;
}
}).show();
});
我确实找到了两种方法来实现这个需求,因为我很难把代码放在这里,你可以在http://ektaraval.blogspot.com/2011/09/calling-javascript-when-jquery-ui-tab.html
希望这能帮助到别人。。
快速查看文档可以找到解决方案:
$('#edit_tabs').tabs({ selected: 2 });
上述语句将激活第三个选项卡。
- 按照选项卡索引的顺序循环一个jQuery选择
- 基于类似索引的queryString的Id选择器
- 哪个更快?按 ID 选择,或按索引选择
- D3选择html——传递函数时,索引从1开始,而不是从0开始
- 在 javaScript 上选择索引更改
- 当下拉列表选择索引相同时,不会触发 __doPostBack()
- 为什么选择索引在此代码中不起作用
- 从列表菜单中获取选择索引并将其放入函数中
- hot以获取所选文本,并在select中选择索引
- 设置选择索引
- MySQL,根据MIN时间戳选择索引
- 单选按钮选择索引更改,当添加icheck.js脚本引用时不触发
- 检查HTML行文本框是否为空,并且除最后一行外,选择索引是否为零
- 在AngularJS中如何根据另一个Select的选择索引来改变一个Select标签的内容
- 当检查是否选择了多个选择索引时,出现SCRIPT ERROR 70
- 下拉框选择索引属性
- HTML JavaScript下拉列表已选择索引
- 在Ember上使用javascript动态更改选择索引值
- 选择索引已更改,未将参数传递到 Web 部件连接
- facebook选项列表选择索引不工作