2013-02-27 5 views
2

Я следовал this recommendation о том, чтобы иметь возможность перезагрузить текущую активную вкладку с помощью:перезагрузки текущей активной вкладки в Twitter Bootstrap

$('#tab-loaded-content').load($('li.active a[data-toggle="tab"]').attr('href')); 

Но когда я попытался это результат в том, что он загружает вкладку первоначально активный (тот, который определен в моем html как активный), а не текущая активная вкладка. Итак, я ищу некоторую помощь, чтобы понять, как это сделать.

Вот упрощенная версия моего вопроса:

<!DOCTYPE html> 
    <html> 
    <head> 
     <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="tabbable">  
     <ul id="mainTabs" class="nav nav-tabs"> 
     <li class="active"><a href="#tabWelcome" data-toggle="tab">Home</a></li> 
     <li><a href="#tabProject" data-toggle="tab">Project</a></li> 
     <li><a href="#tabEmail" data-toggle="tab">Invite Friends</a></li> 
     <li><a href="#tabProfile" data-toggle="tab">My Profile</a></li> 
     </ul> 
     <div class="tab-content"> 
     <div class="tab-pane active" id="tabWelcome"> 
      welcome 
     </div> 
     <div class="tab-pane" id="tabProject"> 
      project 
     <button id="button" class="btn">Create Project</button> 
     </div> 
     <div class="tab-pane" id="tabEmail"> 
     email 
     </div> 
     <div class="tab-pane" id="tabProfile"> 
      profile 
     </div> 
     </div> 
</div> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/js/bootstrap.min.js"></script> 
<script> 
    document.getElementById("button").addEventListener("click", function() { 
     $('#mainTabs').load($('li.active a[data-toggle="tab"]').attr('href')); 
    }, false); 
</script> 
</body> 
</html> 

Идея заключается при нажатии на кнопку «проект» на второй вкладке следует перезагрузить эту вкладку, но перезагружает вкладку «Добро пожаловать».

Любые советы приветствуются!

ответ

1

Мне пришлось реализовать очень похожую функциональность.

В принципе, вам нужно удержать текущую вкладку «деактивировать» и показать ее снова.

$(document).on('click', '#refresh', function() { 
    var $link = $('li.active a[data-toggle="tab"]'); 
    $link.parent().removeClass('active'); 
    var tabLink = $link.attr('href'); 
    $('#mainTabs a[href="' + tabLink + '"]').tab('show'); 
}); 

Просмотреть мою jsFiddle для рабочей демонстрации.

Обратите внимание, что демо использует Bootstrap 3, поэтому используется событие shown.bs.tab, чтобы показать время загрузки табуляции.

+0

В целях улучшения: вы можете потерять «var tablink» и «$ ('# mainTabs ...)», заменив последнюю на $ link.tab (' show '). –

Смежные вопросы