Question

我正在使用bootsrap tab。我实际上有三个部分。默认第一部分被选中。如果我移动到第2部分，则应该刷新第2部分的数据。实际上我在第1部分和第2部分都有注册表单来查看已经过回复的用户。因此，假设我在第1部分中输入了一些细节，然后将其插入到数据库中。现在，除非我刷新第2部分，否则我不会从数据库中获取新值。请告诉我如何更新。也欢迎备用解决方案

<div class="tabbable" id="myTabs">
  <ul class="nav nav-tabs">
    <li><a id="tabAll">All</a></li>
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Section 3</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
    <div class="tab-pane" id="tab3">
      <p>Howdy, I'm in Section 3.</p>
    </div>
  </div>
</div>
<script>
$('#tabAll').click(function(){
  $('#tabAll').addClass('active');  
  $('.tab-pane').each(function(i,t){
    $('#myTabs li').removeClass('active'); 
    $(this).addClass('active');  
  });
});
</script>

Answer 1

您可以使用location.hash相应地操作标签选择。
或使用Sammy js
Localstorage是另一种选择，请参阅this

Answer 2

当您单击第2部分选项卡时，对数据库进行ajax调用以获取新值。另一个选择是在您提交表单后进行刷新（我假设您也使用ajax），只需将新内容加载到表单提交事件的ajax成功处理程序中的“＃tab2”div

是否可以刷新引导选项卡

2 个答案: