Help Linking to Tabs

I am redesigning a website and I am using tabs to clean up the lengthy content on certain pages. The tabs function nicely and do make things a lot cleaner, however I'm having trouble making the tabs linkable. In other words, I'd like to have a direct link to a tab so that when someone clicks the link, it goes directly to the page, but opens the specific tab. I've seen this done on other websites, but have no idea how to do it.

I'm new to scripting, but have decent knowledge of html and css... but I can't get this to work with traditional <a href="#tab2"> . Help appreciated.

Here's the html code on my page:
<div id="tabContainer">
<div class="tabs">
<ul>
<li id="tabHeader_1">Tab 1</li>
<li id="tabHeader_2">Tab 2</li>
<li id="tabHeader_3">Tab 3</li>
</ul>
</div>
<div class="tabscontent">
<div class="tabpage" id="tabpage_1">
<p>content</p>
</div>
</div>

Here's the CSS:
#tabContainer {
width:930px;
padding:5px;
-moz-border-radius: 4px;
border-radius: 4px;
text-color:#000;

}



.tabs{
height:30px;
margin:0px 0px -2px -40px;
}

.tabs > ul{
font-size: 1em;
list-style:none;
/*text-decoration:none;
font-weight:bold;*/
}

.tabs > ul > li{
margin:0 5px 0 0;
padding:7px 10px;
display:block;
float:left;
color:#FFF;
font-weight:bold;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius:4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background: #755a3f; /* old browsers */
background: -moz-linear-gradient(top, #755a3f 0%, #755a3f 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#755a3f), color-stop(100%,#755a3f)); /* webkit */
-moz-box-shadow: -2px -2px 2px #333;
-webkit-box-shadow: -2px -2px 2px #333;
box-shadow: -2px -2px 2px #333;


}

a.tab{
color:#fff; text-decoration:none;
a.tab:active: color:#000; text-decoration:none;
}

.tabs > ul > li:hover{
background: #91704e; /* old browsers */
background: -moz-linear-gradient(top, #91704e 0%, #91704e 10%, #91704e 50%, #91704e 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91704e), color-stop(10%,#91704e), color-stop(50%,#91704e), color-stop(100%,#91704e)); /* webkit */
cursor:pointer;
color: #fff;

}

.tabs > ul > li.tabActiveHeader{
background: #D2B48C; /* old browsers */
background: -moz-linear-gradient(top, #D2B48C 0%, #D2B48C 10%, #D2B48C 50%, #D2B48C 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2B48C), color-stop(10%,#D2B48C), color-stop(50%,#D2B48C), color-stop(100%,#D2B48C)); /* webkit */
cursor:pointer;
color: #000;

}

.tabscontent {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding:10px 10px 25px;
/*border-top:2px solid #856C48;
border-right:2px solid #856C48;
border-bottom:2px solid #856C48;
border-left:2px solid #856C48; */
-moz-box-shadow: 0 0 5px 2px #333;
-webkit-box-shadow: 0 0 5px 2px #333;
box-shadow: 0 0 5px 2px #333;



background: #D2B48C; /* old browsers */
background: -moz-linear-gradient(top, #D2B48C 0%, #D2B48C 90%, #D2B48C 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2B48C), color-stop(90%,#D2B48C), color-stop(100%,#D2B48C)); /* webkit */
margin:0;
color:#000;
}

Lastly, the javascript:

window.onload=function() {

// get tab container
var container = document.getElementById("tabContainer");
// set current tab
var navitem = container.querySelector(".tabs ul li");
//store which tab we are on
var ident = navitem.id.split("_")[1];
navitem.parentNode.setAttribute("data-current",ident);
//set current tab with class of activetabheader
navitem.setAttribute("class","tabActiveHeader");

//hide two tab contents we don't need
var pages = container.querySelectorAll(".tabpage");
for (var i = 1; i < pages.length; i++) {
pages[i].style.display="none";
}

//this adds click event to tabs
var tabs = container.querySelectorAll(".tabs ul li");
for (var i = 0; i < tabs.length; i++) {
tabs[i].onclick=displayPage;
}
}

// on click of one of tabs
function displayPage() {
var current = this.parentNode.getAttribute("data-current");
//remove class of activetabheader and hide old contents
document.getElementById("tabHeader_" + current).removeAttribute("class");
document.getElementById("tabpage_" + current).style.display="none";

var ident = this.id.split("_")[1];
//add class of activetabheader to new active tab and show contents
this.setAttribute("class","tabActiveHeader");
document.getElementById("tabpage_" + ident).style.display="block";
this.parentNode.setAttribute("data-current",ident);
}

You don't need scripting for this. <a href="#tab2"> will go to a place on your page that is marked with:
<a name=tab2>This is tab2</a>

To go to a different page and to the tab use:
<a href="http://www.differentPageName.html#tab2">Go to diff page</a>

Hi sunfighter,

Thanks for your response. I've tried your suggestion numerous times and numerous ways, but it won't work. It takes me to the right page, but always defaults to the first tab.

If you have any additional thoughts I'd appreciate hearing them.

Thanks.

You didn't paste the code you used for the last message, so I can't see what you did wrong.

This is the page we display. It's a little off cause I don't have the time to make it any better. It's named

test.html

<!DOCTYPE html>
<html>
<head>
<title>This is test.html</title>
<style type="text/css">
#tabContainer {
width:930px;
//padding:5px;
//-moz-border-radius: 4px;
//border-radius: 4px;
text-color:#000;
}
.tabs{
height:30px;
margin:0px 0px -2px -40px;
}
.tabs > ul{
font-size: 1em;
list-style:none;
}
.tabs > ul > li{
margin:0 5px 0 0;
padding:7px 10px;
display:block;
float:left;
color:#FFF;
font-weight:bold;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
border-top-left-radius:4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
background: #755a3f; /* old browsers */
background: -moz-linear-gradient(top, #755a3f 0%, #755a3f 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#755a3f), color-stop(100%,#755a3f)); /* webkit */
-moz-box-shadow: -2px -2px 2px #333;
-webkit-box-shadow: -2px -2px 2px #333;
box-shadow: -2px -2px 2px #333;
}
.tabs > ul > li:hover{
background: #91704e; /* old browsers */
background: -moz-linear-gradient(top, #91704e 0%, #91704e 10%, #91704e 50%, #91704e 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#91704e), color-stop(10%,#91704e), color-stop(50%,#91704e), color-stop(100%,#91704e)); /* webkit */
cursor:pointer;
color: #fff;

}
.tabs > ul > li.tabActiveHeader{
background: #D2B48C; /* old browsers */
background: -moz-linear-gradient(top, #D2B48C 0%, #D2B48C 10%, #D2B48C 50%, #D2B48C 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2B48C), color-stop(10%,#D2B48C), color-stop(50%,#D2B48C), color-stop(100%,#D2B48C)); /* webkit */
cursor:pointer;
color: #000;
}

.tabscontent {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
border-top-left-radius: 0px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
padding:10px 10px 25px;
-moz-box-shadow: 0 0 5px 2px #333;
-webkit-box-shadow: 0 0 5px 2px #333;
box-shadow: 0 0 5px 2px #333;
background: #D2B48C; /* old browsers */
background: -moz-linear-gradient(top, #D2B48C 0%, #D2B48C 90%, #D2B48C 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D2B48C), color-stop(90%,#D2B48C), color-stop(100%,#D2B48C)); /* webkit */
margin:6px 0px;
height: 100px;
overflow:hidden;
color:#000;
}
</style>
</head>

<body>
<div id="tabContainer">
<div class="tabs">
<ul>
<li><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
</div>
<div class="tabscontent">
<a name=tab1>
<p>content tab1</p>
<p>content tab1</p>
<p>content tab1</p>
<p>content tab1</p></a>
<a name=tab2>
<p>content tab2</p>
<p>content tab2</p>
<p>content tab2</p>
<p>content tab2</p></a>
<a name=tab3>
<p>content tab3</p>
<p>content tab3</p>
<p>content tab3</p>
<p>content tab3</p></a>
<p>This will not show</p>
<p>This will not show</p>
<p>This will not show</p>
<p>This will not show</p>
<p>This will not show</p>
<p>This will not show</p>
<p>This will not show</p>
<p>This will not show</p>
</div>
</div>
</body>

</html>


The tabs should works as expected.

Here's a page that links to the above and displays the second tab info

page2.html:

<a href="test.html#tab2">Go to diff page</a>