Question

i am using following code as a tab plugin

//When page loads...
 $("#searchbox .tab_content").hide(); //Hide all content
 $("#searchbox ul.tabs li:first").addClass("active").show(); //Activate first tab
 $("#searchbox .tab_content:first").show(); //Show first tab content
//alert($("ul.tabs li:last").find("a").attr("href"));
 //On Click Event
 $("#searchbox ul.tabs li").click(function() {

  $("#searchbox ul.tabs li").removeClass("active"); //Remove any "active" class
  $(this).addClass("active"); //Add "active" class to selected tab
  $("#searchbox .tab_content").hide(); //Hide all tab content

  var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
  $(activeTab).fadeIn(); //Fade in the active ID content
  return false;
 });

my html page contains 4 list items as a menu. When the page refreshes it always loads first element content as illustrated in the code. Each li links to the div having their respective forms. If i call same page in the action form, how can i load the respective content. means if i submitted the search rent form then when the page refreshes, it should show search rent container instead of li:first

Answer 1

You could add a hidden field to the search form with information about the current open tab, and after posting use that information to set the right class on a li-item.

Change your form like so:

<form method="post">
  <input type="hidden" name="activetab" value="" />
  ...
</form>

Then go like this, you could use the li-element’s id to know which tab is active:

$("#searchbox ul.tabs li").click(function() {
    $("input[name=activetab]").val($(this).attr("id"));
});

After posting your form, if you’d use PHP you could go like this:

foreach($tab_id_array as $tab_id) { ?>
<li class="<?= ($_POST["activetab"]==$tab_id) ? "active" : "" ?>"><?= $tabcontent ?></li>
<? } ?>