current tab is still active even after reload

[nadiam]

That is my js for my tabs and as the title article entails i want the current tab to be active even after reload.
for example my webpage has 12 tabs for each month (January, february ... etc) and as for the tab content there is a form, table and save button. say i go to the february tab and fill in the form and then click save, i want it to still stay on the feb tab page instead of reverting back to january tab page which is what it does now. how do i achieve this??

 

 

   

    var tabLinks = new Array();

1. var contentDivs = new Array();
2.  
3. function init() {
4.  
5. // Grab the tab links and content divs from the page
6. var tabListItems = document.getElementById('tabs').childNodes;
7. for ( var i = 0; i < tabListItems.length; i++ ) {
8. if ( tabListItems[i].nodeName == "LI" ) {
9. var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
10. var id = getHash( tabLink.getAttribute('href') );
11. tabLinks[id] = tabLink;
12. contentDivs[id] = document.getElementById( id );
13. }
14. }
15.  
16. // Assign onclick events to the tab links, and
17. // highlight the first tab
18. var i = 0;
19.  
20. for ( var id in tabLinks ) {
21. tabLinks[id].onclick = showTab;
22. tabLinks[id].onfocus = function() { this.blur() };
23. if ( i == 0 ) tabLinks[id].className = 'selected';
24. i++;
25. }
26.  
27. // Hide all content divs except the first
28. var i = 0;
29.  
30. for ( var id in contentDivs ) {
31. if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
32. i++;
33. }
34. }
35.  
36. function showTab() {
37. var selectedId = getHash( this.getAttribute('href') );
38.  
39. // Highlight the selected tab, and dim all others.
40. // Also show the selected content div, and hide all others.
41. for ( var id in contentDivs ) {
42. if ( id == selectedId ) {
43. tabLinks[id].className = 'selected';
44. contentDivs[id].className = 'tabContent';
45. } else {
46. tabLinks[id].className = '';
47. contentDivs[id].className = 'tabContent hide';
48. }
49. }
50.  
51. // Stop the browser following the link
52. return false;
53. }
54.  
55. function getFirstChildWithTagName( element, tagName ) {
56. for ( var i = 0; i < element.childNodes.length; i++ ) {
57. if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
58. }
59. }
60.  
61. function getHash( url ) {
62. var hashPos = url.lastIndexOf ( '#' );
63. return url.substring( hashPos + 1 );
64. }

 

this is a sample of my html tab code:

1. <ul id="tabs">
2. <li><a href="#jan">January</a></li>
3. <li><a href="#feb">February</a></li>
4. <li><a href="#march">March</a></li>
5. </ul>
6.  
7. <div class="tabContent" id="jan">
8. <form method="post" action="income.php">
9. <table border="1" rules="groups" cellpadding="10px;" class="tableincome">
10. <thead>
11. <th>Monthly Salary</th>
12. <th></th>
13. <th>RM</th>
14. </thead>
15. <tr>
16. <td>Basic Salary</td>
17. <td></td>
18. <td><center><input type="text" name="basic" size="11" placeholder="0" value="<?php if(isset($_POST['basic'])){echo htmlentities($_POST['basic']);} ?>"></center></td>
19. </tr>
20. </table>
21. <input type="submit" value="Save" class="jansave" name="jansave">
22. </div>

thanks in advance!

[.josh]

javascript does not remember anything from page to page (or page reload) by itself. One way to do what you want is to use js to save the tab id/name/whatever in a cookie and then on page load, use js to read that cookie and change it to that div.