Save status and contents of last clicked tab

Asked

Viewed 96 times

0

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

Example of the applied code:

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>

1 answer

0

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 find out what was the last tab to be clicked.

Adjusting to your code would be

<script src="https://github.com/carhartl/jquery-cookie/blob/master/src/jquery.cookie.js"></script>
<script src="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");  
    }

});
Show 1 more comment

Browser other questions tagged

You are not signed in. Login or sign up in order to post.