Question

我有这个jquery代码：

<script type="text/javascript">
  $(document).ready(function() {
    $(".tabLink").each(function(){
      $(this).click(function(){
        tabeId = $(this).attr('id');
        $(".tabLink").removeClass("activeLink");
        $(this).addClass("activeLink");
        $(".tabcontent").addClass("hide");
        $("#"+tabeId+"-1").removeClass("hide")   
        return false;     
      });
    });  
  });
</script>

和这个HTML：

<div class="tab-box"> 
<a href="javascript:;" class="tabLink activeLink" id="companyinfo">Company</a> 
<a href="javascript:;" class="tabLink" id="contacts">Contacts</a>
</div>

<div class="tabcontent" id="companyinfo-1">
content 1 here
</div>

<div class="tabcontent" id="contacts-1">
content 2 here
</div>

如果刷新页面，则再次选择第一个选项卡。如果页面刷新，如何让它记住我的选择？

Answer 1

离子交易的更简洁的jQuery UI版本答案：

$("#tabs").tabs({
    activate: function( event, ui ) {
        localStorage.selectedTab = ui.newTab.index() + 1;
    },
    active: localStorage.selectedTab ? localStorage.selectedTab - 1 : 0
});

Answer 2

您可以在localStorage。

中保存所点击标签的索引

 // on click, save it in localStorage.selectedTab
localStorage.selectedTab = $(this).index() + 1;

// on document ready, after click handler was added search for it
if (localStorage.selectedTab) {
  $(".tabLink:eq(" + (localStorage.selectedTab - 1) + ")").click();
}

JSFIDDLE

另一个解决方案是使用cookies，但我发现localStorage更容易。

此外，您可以使用active API中的tabs字段，例如Atakan Aral说：

$("#tabs").tabs({
    activate: function( event, ui ) {
        localStorage.selectedTab = ui.newTab.index() + 1;
    },
    active: localStorage.selectedTab ? localStorage.selectedTab - 1 : 0
});

使jquery选项卡记住选择

2 个答案: