Javascript Bookmarkable tabs

[salvi]

Greetings,
Here's the issue: I have a table with some values, the first cell of each line being a link to show/{id} where I have added a tab menu with three "links", one for details, one for edit and one for delete.

<ul class="tabmenu" id="tabmenu">
	<li><a href="#show" onclick="makeactive(1)" id="show">Information</a></li>
	<li><a href="#edit" onclick="makeactive(2)" id="edit">Edit</a></li>
	<li><a href="#delete" onclick="makeactive(3)" id="delete">Delete</a></li>
</ul>

<div id="tab1" class="tab_content_active">
	<!-- my content here -->
</div>
<div id="tab2" class="tab_content">
	<!-- my content here -->
</div>
<div id="tab3" class="tab_content">
	<!-- my content here -->
</div>

my function is as follows:

function makeactive(tab) {
	$(document.getElementById("show")).removeClass();
	$(document.getElementById("edit")).removeClass();
	$(document.getElementById("delete")).removeClass();
	if(tab == 1){
		$(document.getElementById("show")).addClass("active");
	}
	else if(tab == 2){
		$(document.getElementById("edit")).addClass("active");
	}
	else if(tab == 3){
		$(document.getElementById("delete")).addClass("active");
	}
	
	$(document.getElementById("tab1")).removeClass();
	$(document.getElementById("tab1")).addClass("tab_content");
	$(document.getElementById("tab2")).removeClass();
	$(document.getElementById("tab2")).addClass("tab_content");
	$(document.getElementById("tab3")).removeClass();
	$(document.getElementById("tab3")).addClass("tab_content");
	
	$(document.getElementById("tab"+tab)).removeClass();
	$(document.getElementById("tab"+tab)).addClass("tab_content_active");
}

The tabs so far work ok, but I decided to add an edit button to the original table so that the user won't have to first see the information of the element, then click the "Edit" tab and then finally edit it. The button is supposed to open the show.php AND also immediately activate the "edit" tab.

That's where my problem is.
If I link on the "edit" tab my url is like "show/1#edit" (where 1 is the id) but if I refresh the page, the url stays the same, but I see the contents of the "home" tab, meaning the whole thing is kinda broken.

Any help would be mostly appreciated!

[SymetriX]

I believe you'll need to check the hash value on page load and set the correct tab.

[rnd me]

<ul class="tabmenu" id="tabmenu">
	<li><a href="#show" onclick="makeactive(1)" id="show">Information</a></li>
	<li><a href="#edit" onclick="makeactive(2)" id="edit">Edit</a></li>
	<li><a href="#delete" onclick="makeactive(3)" id="delete">Delete</a></li>
</ul>

<div id="tab1" class="tab_content_active">
	<!-- my content here -->
</div>
<div id="tab2" class="tab_content">
	<!-- my content here -->
</div>
<div id="tab3" class="tab_content">
	<!-- my content here -->
</div>

<script>
function makeactive(tab) {
   document.body.className=  document.body.className.replace(/tab\d/,"") + "tab"+tab;
}
</script>

<style>
#tab1, #tab2, #tab3 { display:none;}
.tab1 #tab1,
.tab2 #tab2,
.tab3 #tab3  { display: block; }
:target { display: block; }
</style>