Hide & Slide tabs active menu

Hide & Slide tabs active menu

For example if u have a drop down menu on a one page and on a page u go to has 6 articles in 6 tabs, normally u want to go to that page and land on exactly the right article.

Before i tackled this problem i could only find active page variants for tabs that use 6 different html's with diffferent css stiles to solve this.(linking to the right articles is not a problem for that.)

With this code the only problem it still has is when u link to the, for example div 4 from another page or a drop down with the code:

<a href="content3.php#div4">go to the page and open tab 4</a>

the page opens and the div opens, but active state doesn't change.

I need to solve this, it drives me crazy.

here is the example:

http://www.kinetikgraphix.com/TEST/SHURL/

Please help anyone!!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS tab navigation bar SEO friendly</title>
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<style type="text/css">
#menuContainer a{
    border:#666 1px solid;
    border-bottom:none;
    padding-top:8px;
    padding-bottom:1px;
    padding-left:8px;
    padding-right:8px;
    text-decoration:none;
}
#menuContainer a:hover{
    background-color:#bae4fe;
    color:#03f;
    text-decoration:none;
}
.inactive {
    background-color:#999;
    color:#000;
    text-decoration:none;
}

.active {
    background-color:#00C;
    color:#03f;
    text-decoration:none;
}

</style>
</head>

<body>

<script type="text/javascript">
$(function(){
        $("#div1, #div2, #div3, #div4, #div5, #div6").hide();
     var hash = window.location.hash;
     if (hash){
toggleContent(hash);
}
});

function toggleContent(id) {
     var id = (id.indexOf('#') == -1) ? '#'+id : id;
     if ($(id).is(":hidden")) {
          $(".content").slideUp(200);
          $("div.active").removeClass("active");
  $(id).addClass("active");
          $(id).slideDown(300); // open the hidden id
     } else { // if the id is already open, do this
     $(id).removeClass("active");
          $(id).slideUp(300); // open the id
     }
}

function switchclass(obj) {
   var classcheck = obj.className;
   if(classcheck=="inactive"){
       obj.className="active";
} else if(classcheck=="active"){
    obj.className="inactive";
    }
}
</script>

<div id="menuContainer">
<a href="#" class="inactive" onclick="switchclass(this); return false;" onmousedown="javascript:toggleContent('div1');">div 1</a>
<a href="#" class="inactive" onclick="switchclass(this); return false;" onmousedown="javascript:toggleContent('div2');">div 2</a>
<a href="#" class="inactive" onclick="switchclass(this); return false;" onmousedown="javascript:toggleContent('div3');">div 3</a>
<a href="#" class="inactive" onclick="switchclass(this); return false;" onmousedown="javascript:toggleContent('div4');">div 4</a>
<a href="#" class="inactive" onclick="switchclass(this); return false;" onmousedown="javascript:toggleContent('div5');">div 5</a>
<a href="#" class="inactive" onclick="switchclass(this); return false;" onmousedown="javascript:toggleContent('div6');">div 6</a>
</div>

<div id="div1" class="content">
  <p><strong>div 1</strong><br />
      </p>
<div style="float:right"><a style="color:#000; font-size:12px;" href="#top">Back on top</a></div>
</div>
   
    <div id="div2" class="content" >
      <p>div 2 </p>
<div style="float:right"><a style="color:#000; font-size:12px;" href="#top">Back on top</a></div>
    </div>
<div id="div3" class="content" >
      <p><strong>div 3</strong></p>
<div style="float:right"><a style="color:#000; font-size:12px;" href="#top">Back on top</a></div>
    </div>
<div id="div4" class="content" >
      <p><strong>div 4</strong></p>
<div style="float:right"><a style="color:#000; font-size:12px;" href="#top">Back on top</a></div>
      </div>
<div id="div5" class="content" >
      <p> div 5</p>
      <div style="float:right"><a style="color:#000; font-size:12px;" href="#top">Back on top</a></div>
    </div>
    <div id="div6" class="content" >
      <p> div 6</p>
      <div style="float:right"><a style="color:#000; font-size:12px;" href="#top">Back on top</a></div>
    </div>
</body>
</html>