Question

我有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;
});

在这种情况下，我想要在页面加载时加载的联系人内容。怎么设置这个？

Answer 1

这应该有效。只需抽象函数，并将其绑定到事件，但也可以在加载时调用它，并选择第一个选项卡来调用它。（编辑：抱歉，之前我的功能间距错误了，因为我错误地复制了它。另外，测试了它并改变了一些东西以解决一两个问题。）

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);

Answer 2

如果您被允许使用该身份，请

$('#contacts_tab').trigger('click');。

jQuery选项卡菜单设置活动菜单并加载内容

2 个答案: