jQuery - 选项卡，使用 url 加载 ajax 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14361211/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery - tabs, use url to load ajax content
提问by breq
So my script looks like this
所以我的脚本看起来像这样
function() {
$( "#tabs" ).tabs();
});
function Wczytaj(link, div_id, parametr1, parametr2, parametr3)
{
$.ajax(link, { data: { par1: parametr1, par2: parametr2, par3: parametr3 },
type: "post",
success: function(data) {
$('#'+div_id).fadeOut("medium", function(){
$(this).append(data);
$('#'+div_id).fadeIn("medium");
});
}
});
}
<div id="tabs">
<ul>
<li><a href="#id1" onClick="Wczytaj('trouble2.php','id1','null','null','null');">My id 1</a></li>
<li><a href="#id2" onClick="Wczytaj('trouble2.php?action=lista','id2','null','null','null');">My id 2</a></li>
<li><a href="#id3" onClick="Wczytaj('troubl2.php?action=old','id3','null','null','null');">My id3</a></li>
</ul>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
</div>
And it works without a problem, BUT I want to use also an URL address to load div content
for example, http://myurl.com/page.php#id2should load page with selected tabs with id2- it works, but div is empty because of onClickattribute. How to fix it?
它可以正常工作，但我还想使用 URL 地址来加载 div 内容，例如，http://myurl.com/page.php#id2应该加载带有选定选项卡的页面id2- 它可以工作，但 div 由于onClick属性为空。如何解决？
I apologize for my english
我为我的英语道歉
回答by Rocket Hazmat
You don't need to use your own function to AJAX load into tabs, jQuery can do this for you. Just set the hrefto the URL, and don't add the <div>s.
您不需要使用自己的函数将 AJAX 加载到选项卡中，jQuery 可以为您做到这一点。只需将 设置href为 URL，不要添加<div>s。
<div id="tabs">
<ul>
<li><a href="trouble2.php">My id 1</a></li>
<li><a href="trouble2.php?action=lista">My id 2</a></li>
<li><a href="trouble2.php?action=old">My id3</a></li>
</ul>
</div>
jQuery will make the tabs, and automaticallyload the page via AJAX. See the docs here: http://jqueryui.com/tabs/#ajax
jQuery 将制作选项卡，并通过 AJAX自动加载页面。请参阅此处的文档：http: //jqueryui.com/tabs/#ajax
It will also make the <div>for you. In the example, they are named ui-tabs-X, where Xis the tab index. So, http://myurl.com/page.php#ui-tabs-2should load the page with your 2nd tab open.
它也会<div>为你制作。在示例中，它们被命名为ui-tabs-X，其中X是选项卡索引。因此，http://myurl.com/page.php#ui-tabs-2应该在打开第二个选项卡的情况下加载页面。
Check out jQuery's demo here: http://jqueryui.com/resources/demos/tabs/ajax.html#ui-tabs-2
在此处查看 jQuery 的演示：http: //jqueryui.com/resources/demos/tabs/ajax.html#ui-tabs-2
EDIT: If you want to run a function before or after the remote tabs are loaded, jQuery UI provides the tabsbeforeloadand tabsloadevents.
编辑：如果您想在加载远程选项卡之前或之后运行一个函数，jQuery UI 提供了tabsbeforeload和tabsload事件。
They can be bound when creating the tabs:
创建选项卡时可以绑定它们：
$('#tabs').tabs({
beforeLoad: function(event, ui){
alert('loading');
},
load: function(event, ui){
alert('loaded');
}
});
Or they can be bound afterwards:
或者他们可以在之后绑定：
$('#tabs').on('tabsbeforeload', function(event, ui){
alert('loading');
});
$('#tabs').on('tabsload', function(event, ui){
alert('loaded');
});
回答by ShivarajRH
Reset the href url before load the tab ajax content in Jquery:
在 Jquery 中加载 tab ajax 内容之前重置 href url：
$( "#pending_recs" ).tabs({
beforeLoad: function( event, ui ) {
var filter_url = get_url();
var url_str = site_url+'/admin/pending_recs/'+filter_url+"/0";
$("#pending_recs .ui-tabs-nav .ui-state-active a").attr('href',url_str);
ui.panel.html('<div class="loading">Loading...</div>');
ui.jqXHR.error(function() {
ui.panel.html('<div align="center"><p>Unable to load the content, Please <a href="javascript:void(0)" onclick="return load_contents();">Click here to Reload</a>.</p></div>');
});
}
,load:function( event, ui ) { /* After page load*/ }
});
回答by Explosion Pills
If you just set the hrefattribute of each of the tab links to the ajax URL you are supposed to load it should work.
如果您只是将href每个选项卡链接的属性设置为您应该加载的 ajax URL，它应该可以工作。
If you don't want to do that, then get rid of the onClickattributes. The problem is that when the page loads the trigger for selecting a particular tab such as #id2happens before the click elements are bound. You need to bind the click handlers before that and call the corresponding one when the tab in question is selected by the fragment.
如果你不想那样做，那就去掉这些onClick属性。问题在于，当页面加载触发器以选择特定选项卡时，例如#id2在绑定点击元素之前发生。您需要在此之前绑定点击处理程序，并在片段选择相关选项卡时调用相应的处理程序。
