Question

我正在使用以下jquery作为我的标签：

<SCRIPT>
    $.noConflict();
    jQuery( document ).ready(function( $ ) {
        jQuery('.tabs .tab-links a').on('click', function(e)  {
            var currentAttrValue = jQuery(this).attr('href');

            // Show/Hide Tabs
            jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

            // Change/remove current tab to active
                  jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

            e.preventDefault();
        });
    });
</SCRIPT>

在身体里：

<div class="tabs">
    <ul class="tab-links">
        <li class="active">
        <a href="#tab1">My Submissions</a></li>
        <li><a href="#tab2">History</a></li>
        <li><a href="#tab3">Messages</a></li>
    </ul>
    <div id="tab1" class="tab active">
        Info 1
    </div>
    <div id="tab2" class="tab">
        Info 2
    </div>
    <div id="tab3" class="tab">
        Info 3
    </div>
</div>

当我重新加载页面时，它会重置为tab1，因为我希望它保留在我正在查看的当前标签上，例如tab2或tab3

我将如何做到这一点？

Answer 1

您可以在localStorage中存储当前标签。

<SCRIPT>
$.noConflict();
jQuery( document ).ready(function( $ ) {
if (window.localStorage){
    var currentTab = localStorage.getItem("currentTab");
    currentTab && $(".tabs .tab-links a[href='" + currentTab + "']").click();
}
jQuery('.tabs .tab-links a').on('click', function(e)  {
var currentAttrValue = jQuery(this).attr('href');
localStorage && localStorage.setItem("currentTab",currentAttrValue);
// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

// Change/remove current tab to active
      jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

e.preventDefault();
});
</script>

页面重新加载后继续使用Tab

1 个答案: