我正在使用bootstrap.js作为标签。但是当单击选项卡时,我无法执行ajax请求加载链接

时间:2012-10-05 11:19:53

标签: ajax tabs twitter-bootstrap

我的HTML

    <ul class="nav nav-tabs tabs-up" id="friends">
      <li><a href="http://localhost:3000/contacts" data-target="#contacts" class="media_node active span" id="contacts_tab" data-toggle="tabajax" rel="tooltip"> Contacts </a></li>
      <li><a href="http://localhost:3000/follows/friends_list" data-target="#friends_list" class="media_node span" id="friends_list_tab" data-toggle="tabajax" rel="tooltip"> Friends list</a></li>
      <li><a href="http://localhost:3000/follows/awaiting_request" data-target="#awaiting_request" class="media_node span" id="awaiting_request_tab" data-toggle="tabajax" rel="tooltip">Awaiting request</a></li>
    </ul>

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

我的javascript代码:

 $('[data-toggle="tabajax"]').click(function (e)
    {
        e.preventDefault()
    var loadurl = $(this).attr('href')
    var targ = $(this).attr('data-target')

    $.get(loadurl, function(data) {

      $(targ).html(data)
      });

    $(this).tab('show')
     return false;

 });

我分别给了标签链接。但是,当单击选项卡时,我无法在页面中呈现这些链接。 任何人都可以帮助我解决这个问题。

1 个答案:

答案 0 :(得分:4)

似乎对我有用:

JSFiddle

我添加到您的唯一代码(除了使用ajax调用的一些要点之外)将选项卡窗格放在<div class="tab-content">内。