Save state and contents of last clicked tab

Question

Save state and contents of last clicked tab

Navigation

#1 by (0 votes)

0

I have a page with some tabs that load content through the .load feature, I would like that after returning to this page the last tab clicked will continue marked and the content called via load will continue the same. How can I do this?

Applied code example:

jQuery("containerAbas span").click(function({
jQuery(this).removeClass("abaInativa").addClass("abaAtiva").siblings("span").addClass("abaInativa");
jQuery("#carregar").css("display","none").fadeIn("slow").load("pagina.html")
});

.abaAtiva{
  margin:0 0.5% 0 0;
  padding:10px 1% 0 1%;
  height:35px;
  background:#ff5800;
  float:left;
  color:#fff;
}

.abaInativa{
  margin:0 0.5% 0 0;
  padding:10px 1% 0 1%;
  height:35px;
  background:#c6c5c5;
  color:#333;
  float:left;
}

<div class="containerAbas">
  <span id="aba1" class="abaAtiva">item 1</span>
  <span id="aba2" class="abaInativa">item 2</span>
</div>

jquery

asked by anonymous 19.10.2015 / 20:46

1 answer

SplitContainer with form ListBox how to add items? Http Client and Async Task - ANDROID

score 0 · Answer 1

You can use cookies for this. With jQuery you can make use of the plugin JQUERY COOKIE

Place an onclik event to store information by clicking the tab.

ex:

jQuery.cookie("ABA", "1");

In the onload event use

var x = jQuery.cookie("ABA");

To know which last tab to click.

Adjusting to your code would be

<script src="https://github.com/carhartl/jquery-cookie/blob/master/src/jquery.cookie.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="containerAbas">
  <span id="aba1" class="abaAtiva">item 1</span>
  <span id="aba2" class="abaInativa">item 2</span>
</div>

jQuery(".containerAbas span").click(function(){
        jQuery(this).removeClass("abaInativa").addClass("abaAtiva").siblings("span").addClass("abaInativa");
        jQuery.cookie("ultima_aba_aberta", jQuery(this).attr("id"), { expires: 30 }); // marcando a aba clicada

    jQuery("#carregar").css("display","none").fadeIn("slow").load("pagina.html")
    });
jQuery(function() {
    var ultima_aba = jQuery.cookie("ultima_aba_aberta");
    if (ultima_aba != null) {
        jQuery("#" + ultima_aba).trigger("click");  
    }

});