请记住刷新后哪个选项卡处于活动状态

Question

我在网页上使用jquery选项卡并刷新页面时，它丢失了曾经选中的选项卡并返回到第一个选项卡。

有没有人遇到过这个问题，并知道如何解决它？

Answer 1

我假设你正在使用jQuery UI选项卡，

这里是使用标签+ cookies来保存最后点击选项卡

http://jqueryui.com/demos/tabs/#cookie

演示的一个例子： 打开此链接 http://jqueryui.com/demos/tabs/cookie.html

关闭它并重新打开它，您将看到相同的点击标签

更新： 3年多了解这个答案jquery ui已弃用cookie选项：http://jqueryui.com/upgrade-guide/1.9/#deprecated-cookie-option。

，但你仍然可以追加看看这里，如果这符合您的需要或不https://stackoverflow.com/a/14313315/109217

Answer 2

可以使用jQuery History plugin，这里是一个demo（加载演示另一个链接，然后尝试刷新）

Answer 3

当网页刷新，他们重新从服务器的状态，再次请求页面。

Web服务器需要记住状态并以不同于默认值的方式提供文件，或者您可以使用Cookie或URL的哈希组件和一些jQuery来存储状态，恢复它。

请参阅jquery.cookie plugin或SWFaddress，了解如何自己操作哈希值或jQuery历史记录插件。

哈希方法具有特别的吸引力，因为它复制URL的更改，所以URL的复制/粘贴仍然有效，书签也一样。

Answer 4

我公司块饼干，所以我找到了解决办法。只需使用隐藏字段跟踪选项卡，并在请求完成后将该值传回。这不是很好，但它完成了工作。

<% if(request.getAttribute("tab")==null) { %> 
    $("#tabs").tabs(); 
<% } else { %> 
    $("#tabs").tabs({selected:<%=request.getAttribute("tab").toString() %>}); 
<% } %> 

在后端我刚才设置的属性

request.setAttribute("tab", f.get("tab").toString()); 

希望这有助于。

Answer 5

一个简单的替代我刚刚实施：

$(".tabs").tabs({ 
    select: function(event, ui) {     
     window.location.replace(ui.tab.hash); 
    }, 
}); 

这将哈希值添加到URL，从而刷新页面会将该选项卡，并通过使用location.replace而不是location.hash，我们不补用户的历史记录随着不需要的步骤回来。

希望有所帮助。

Answer 6

您是否认为您可以在下面的代码中添加相同的功能。

$(".menu > li").click(function(e){ 
    $(".content." + $(".menu > .active").attr("id")).fadeOut("fast", function() { 
     $(".content." + e.target.id).fadeIn(); 
     $(".menu > #" + e.target.id).addClass("active"); 
    }); 

    $(".menu > .active").removeClass("active"); 

    return true; 

}); 

Answer 7

包括jQuery的饼干插件：

<script type="text/javascript" src="/resources/js/jquery.cookies.2.2.0.min.js"></script> 

声明cookie名称在$。功能（{..或作为的document.ready

var cookieName = "mycookie"; 

$("#tabs").tabs({ 
    selected : ($.cookies.get(cookieName) || 0), 
    select : function(e, ui) { 
     $.cookies.set(cookieName, ui.index); 
    } 
     }); 

Answer 8

你可以尝试这样的事情，这很容易做到。

# Set selected_tab to the correct index based on the current url anchor hash 
selected_tab = 0 
if matches = /#(\w+)/.exec(window.location.hash) 
    # find the index of the tab with the given id 
    selected_tab = $('#' + matches[1]).index() - 1 

# Initialize the tabs and set 'selected' to equal the selected_tab variable we just set 
$('.tabable').tabs 
    selected: selected_tab, # this is where the magic happens 
    select: (evt, ui) -> 
    window.location.hash = ui.panel.id # set an anchor tag in the url with the tab id 

Answer 9

现在，饼干是jQuery UI的1.10.0走了，我混Gayathiri的新选项和事件的方法：

// using cookie plugin from https://github.com/carhartl/jquery-cookie 

var tabCookieName = "ui-tabs-1"; 
$(".tabs").tabs({ 
    active : ($.cookie(tabCookieName) || 0); 
    activate : function(event, ui) { 
     var newIndex = ui.newTab.parent().children().index(ui.newTab); 
     // my setup requires the custom path, yours may not 
     $.cookie(tabCookieName, newIndex, { path: window.location.pathname }); 
    } 
}); 

Answer 10

与其他人一样，我有我的用户界面的选项卡饼干历史jQueryUI的1.10挣扎。 感谢Harry的解决方案和我在下面的代码中提到的一些其他在线文档，现在我有一个可用的非cookie解决方案！我能够在Firefox 18.0.1和IE 9.0.12中测试。根据我的资源，Chrome，Firefox，Safari和IE8 &以上都支持Session Storage。

$(function() { 
    // jQueryUI 1.10 and HTML5 ready 
    //  http://jqueryui.com/upgrade-guide/1.10/#removed-cookie-option 
    // Documentation 
    //  http://api.jqueryui.com/tabs/#option-active 
    //  http://api.jqueryui.com/tabs/#event-activate 
    //  http://balaarjunan.wordpress.com/2010/11/10/html5-session-storage-key-things-to-consider/ 
    // 
    // Define friendly index name 
    var index = 'key'; 
    // Define friendly data store name 
    var dataStore = window.sessionStorage; 
    // Start magic! 
    try { 
     // getter: Fetch previous value 
     var oldIndex = dataStore.getItem(index); 
    } catch(e) { 
     // getter: Always default to first tab in error state 
     var oldIndex = 0; 
    } 
    $('#tabs').tabs({ 
     // The zero-based index of the panel that is active (open) 
     active : oldIndex, 
     // Triggered after a tab has been activated 
     activate : function(event, ui){ 
      // Get future value 
      var newIndex = ui.newTab.parent().children().index(ui.newTab); 
      // Set future value 
      dataStore.setItem(index, newIndex) 
     } 
    }); 
    }); 

Answer 11

$(function() { 

     $("#dialog").dialog({ 
      autoOpen: false, 
      show: { 
       effect: "blind", 
       duration: 1000 
      }, 
      hide: { 
       effect: "explode", 
       duration: 1000 
      } 
     }); 

     //$(function() { 
      $("#tabs").tabs({ 
        select: function (event, ui) {      
        document.location.href = ui.tab.href;       
       } 
      }).show(); 

     //}); 

        $("#MainContent_button1").click(function (event) {       
         event .preventDefault(); 
         $("#dialog").dialog("open");       
        }); 
    }); 

我用它在ASP.NET，它为我工作得很好。我也在第二个标签中有一个按钮来显示一些对话框，它的工作原理非常完美。

Pooja Dhingra

Answer 12

另一种选择是使用html 5存储。在这里看到的例子：http://www.w3schools.com/html/html5_webstorage.asp

Answer 13

这是一种替代方法，以允许由元素ID（不索引）记住打开的选项卡。如果您使用此代码将两个不同页面上打开的选项卡与相似的元素（如显示和编辑页面）同步，这很有用。

var tabsid = "#tabs"; 
var cookieid = "tabs_selected2"; 

var activetabnr = 0; 
if (($.cookie(cookieid)!=null) && ($.cookie(cookieid)!="")) { 
    activetabnr = $(tabsid+' a[href="'+$.cookie(cookieid)+'"]').parent().index(); 
} 

$(tabsid).tabs({ 
    active: $(tabsid).tabs({ active: activetabnr }), 
    beforeActivate: function (event, ui) { 
     $.cookie(cookieid, "#"+ui.newPanel.attr('id')); 
    } 
}); 

适用于jQuery UI 1.10。 不要忘了包括jquery.cookie plugin！这样使用localStorage的

<script type="text/javascript" src="/js/jquery.cookie.js"></script> 

Answer 14

短，布局无关的方式：

$("#tabs").tabs({ 
    active: localStorage.getItem("currentIdx"), 
    activate: function(event, ui) { 
     localStorage.setItem("currentIdx", $(this).tabs('option', 'active')); 
    } 
}); 

---

使用自定义数据属性（如果属性值分别为以可能有用做它的具体布局方式在脚本的其他地方以某种方式使用）。

jQuery用户界面：

$("#tabs").tabs({ 
    active: localStorage.getItem("currentTabIndex"), 
    activate: function(event, ui) { 
     localStorage.setItem("currentTabIndex", ui.newPanel[0].dataset["tabIndex"]); 
    } 
}); 

例HTML布局：

<div id="tabs"> 
    <div id="tabs-1" data-tab-index="0"> 
     tab 1 stuff... 
    </div> 
    <div id="tabs-2" data-tab-index="1"> 
     tab 2 stuff... 
    </div>  
    <div id="tabs-3" data-tab-index="2"> 
     tab 3 stuff... 
    </div> 
</div> 

Answer 15

我有以下blog的帮助下解决了同样的问题。

HTML标签

<ul class="tabs clear-fix"> 
    <li class=""><a href="#tab=java" id="tab1-tab"><i class=" fa fa-search-plus fa-lg" style="font-size:16px; "></i>JAVA</a><span></span></li> 
    <li class=""><a href="#tab=js" id="tab2-tab"><i class=" fa fa-user fa-lg" style="font-size:16px;"></i>JAVA SCRIPT</a><span></span></li> 
    <li><a href="#tab=c" id="tab3-tab"><i class="fa fa-archive fa-lg" style="font-size:16px;"></i>C</a><span></span></li> 
    <li><a href="#tab=c2" id="tab4-tab"><i class=" fa fa-gift fa-lg" style="font-size:16px;"></i>C++</a><span></span></li> 
    <li><a href="#tab=jQ" id="tab5-tab"><i class=" fa fa-heart fa-lg" style="font-size:16px;"></i>jQuery</a><span></span></li> 
    </ul> 

的Javascript

var selectedTab = window.location.href.split("#tab=")[1] ; 
    var selectedId = $('a[href$=' + selectedTab+']:first').attr('id'); 

    if (typeof selectedId === "undefined") { 
     $('#tab1-tab').trigger("click"); 
    } 
    else{ 
     $('#'+selectedId).trigger("click"); 
    } 

对于我来说它的工作，建议赞赏。

Answer 16

我最近有同样的问题，并花了很长时间看文档JQuery UI Tabs Widget。我最终使用了针对JQuery UI 1.10的事件activate和create以及localStorage在页面刷新之前存储当前标签。

$(".selector").tabs({             
    activate: function(event, ui) { 
     //when tab is activated store it's index in activeTabIndex 
      var activeTabIndex = $('.tabs').tabs('option','active'); 
     //add activeTabIndex to localStorage and set with key of 'currentTab' 
      localStorage.setItem('currentTab', activeTabIndex); 
         }, 
     create: function(event, ui) { 
      $(".tabs").tabs({  
     //when tabs are created on page refresh, the active tab is set to index of 'currentTab' 
     //after getItem from localStorage 
     active: localStorage.getItem('currentTab') 
    }); 
    } 

}）;