动态选项卡关闭当我刷新时

时间:2018-01-30 12:49:12

标签: javascript jquery

我有动态标签。

我需要在刷新页面时不应关闭标签

脚本:



var button = '<button class="close" type="button" title="Remove this page">×</button>';
var tabID = 1;

function resetTab() {
  var tabs = $("#tab-list li:not(:first)");
  var len = 1
  $(tabs).each(function(k, v) {
    len++;
    $(this).find('a').html('Tab ' + len + button);
  })
  tabID--;
}

$(document).ready(function() {
  $('#btn-add-tab').click(function() {
    tabID++;
    $('#tab-list').append($('<li><a href="#tab' + tabID + '" role="tab" data-toggle="tab">Tab ' + tabID + '<button class="close" type="button" title="Remove this page">×</button></a></li>'));
    $('#tab-content').append($('<div class="tab-pane fade" id="tab' + tabID + '">Tab ' + tabID + ' content</div>'));
  });
  $('#tab-list').on('click', '.close', function() {
    var tabID = $(this).parents('a').attr('href');
    $(this).parents('li').remove();
    $(tabID).remove();

    //display first tab
    var tabFirst = $('#tab-list a:first');
    resetTab();
    tabFirst.tab('show');
  });

  var list = document.getElementById("tab-list");
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-12">
    <p>
      <button id="btn-add-tab" type="button" class="btn btn-primary pull-right">Add Tab</button>
    </p>
    <!-- Nav tabs -->
    <ul id="tab-list" class="nav nav-tabs" role="tablist">
      <li class="active"><a href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
    </ul>

    <!-- Tab panes -->
    <div id="tab-content" class="tab-content">
      <div class="tab-pane fade in active" id="tab1">Tab 1 content</div>
    </div>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:-1)

您所能做的就是告诉用户不要离开页面。 由于安全和反垃圾邮件原因,无法阻止关闭。

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

#!/bin/bash  -i

使用window.onbeforeunload = function(e) { var dialogText = 'Dialog text here'; e.returnValue = dialogText; return dialogText; }; 至少可以让你有机会在函数调用期间进行一些清理工作,例如将数据写入本地或会话存储或向api发送同步请求并向用户返回消息以便他可以决定是否要通过导航离开来卸载当前窗口 由于跨浏览器问题,上面的示例以两种不同的方式设置文本 您可以在上面链接的相应MDN文章中阅读更多相关内容。