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>