回发 vb.net 后保留引导程序 3 选项卡

Question

您好，我很困惑，当服务器上发生回发而不是返回第一个选项卡时，我需要帮助引导水龙头保留其当前选项卡。我知道以前有人问过这个问题，但我似乎无法实施解决方案。请温柔一点，宽恕一个可怜的罪人。 我在下面给出了四个标签

     <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

这里是一个使用 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

Answer 2

至少，这条线是错误的 $("#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 类的位置。