[英]jQuery Tab Menu Set Active Menu and load the content
我有jQuery
选项卡菜单调用ajax。
菜单工作正常,但是现在我想在页面加载时始终显示要加载的第一个标签(表示活动标签)。
您可以在这里看到小提琴: https : //jsfiddle.net/waspinator/rw8ujfg3/
<ul class="nav nav-tabs tabs-up " id="friends">
<li active><a href="/gh/gist/response.html/3843293/" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
<li><a href="/gh/gist/response.html/3843301/" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
<li><a href="/gh/gist/response.html/3843306/" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
JS
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
在这种情况下,我希望在页面上加载联系人内容。 如何设置呢?
这应该工作。 只需对函数进行抽象,并将其绑定到事件,还可以在加载时调用它,并选择第一个选项卡以对其进行调用。 ( 编辑 :对不起,我之前错了函数的间距,因为我复印错了。而且,对其进行了测试并更改了一些内容以解决一两个问题。)
function doAjaxStuff(event, tab) {
var $this = tab || $(this)
var $this = tab || $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
}
doAjaxStuff(null, $('.nav-tabs li:first-child a'))
$('[data-toggle="tabajax"]').click(doAjaxStuff);
$('#contacts_tab').trigger('click');
如果允许您使用ID。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.