Question

你好我很困惑，我需要帮助，当在服务器发生回发而不是回到第一个标签时，保留当前标签的bootstrap tap。我知道之前有人问这个问题，但我似乎无法实施解决方案。请温柔，原谅一个可怜的罪人。我有以下四个标签

     <ul class="nav nav-tabs" data-tabs="tabs" id="myTab">

    <li class="active"><a href="#cSession" title="Personal Information">Create Session</a>   </li>
    <li><a href="#cTerm"  title="Admission Details">Create Term</a></li>
    <li><a href="#cClass" title="Residential Address">Create Class</a></li>
  <li><a href="#vClass" title="Residential Address">View Created Classes</a></li>
</ul>

启动标签的脚本是

$（document）.ready（function（）{

var tab = $("#hidTAB").val;
$('#myTab a[href="' + tab + '"]').tab('show');


$('#myTab a[href="#cSession"]').click(function (e) {
    e.preventDefault();
    $("#myTab").removeClass("active");
    $(this).addClass('active');
    $(this).tab('show');
    $("#hidTAB").val() = "cSession";
})

$('#myTab a[href="#cTerm"]').click(function (e) {
    e.preventDefault();
    $("#myTab").removeClass("active");
    $(this).addClass('active');
    $(this).tab('show');
    $("#hidTAB").val() = "cTerm";
})

$('#myTab a[href="#cClass"]').click(function (e) {
    e.preventDefault();
    $("#myTab").removeClass("active");
    $(this).addClass('active');
    $(this).tab('show');
    $("#hidTAB").val() = "cClass";
})

$('#myTab a[href="#vClass"]').click(function (e) {
    e.preventDefault();
    $("#myTab").removeClass("active");
    $(this).addClass('active');
    $(this).tab('show');
    $("#hidTAB").val() = "vClass";
})

}）;

我在这个论坛上看到可以使用隐藏字段存储选项卡。我试过从这篇文章Remain bootstrap tab after postback c#中实现这个想法。但我似乎可以使它成功。我的jquery技能和我的法语一样糟糕，而且我不懂法语中的10多个短语。我需要帮助。感谢

Answer 1

至少，这条线是错误的 $("#hidTAB").val() = "cSession";

它应该是： $("#hidTAB").val("cSession");

我还建议通过在父元素上使用委托来减少所有重复代码，例如

$('#myTab').on('click','a', function(e) {
  e.preventDefault();
  var $t = $(this);
  $("#myTab").find('li').removeClass("active");
  $t.parent('li').addClass('active').tab('show');
  $("#hidTAB").val($t.attr('href'));
});

希望有所帮助。

编辑：已更新以更正以正确选择<li>而不是<a>，因为这是在HTML中设置active类的位置。

Answer 2

以下是使用sessionStorage

的示例

$(function(){

  var selTab = sessionStorage.getItem('myTab');
  var myTab = $('#myTab');

  myTab.on('click','a', function(e) {
    e.preventDefault();
    var $t = $(this);
    myTab.find('li').removeClass('active');
    $t.parent('li').addClass('active').end().tab('show');
    sessionStorage.setItem( 'myTab', $t.attr('href') );
  });

  if ( selTab ) {
    $('a[href='+selTab+']').parent().addClass('active');
  } else {
    myTab.find('li').first().addClass('active'); //set first tab to active if none selected
  }
});

您可以在行动中看到它（减去tab('show')部分on this pen

回发vb.net后保留bootstrap 3选项卡

2 个答案: