JavaScript Tabs

[Omzy]

I want to create JavaScript content tabs based on a div/ul structure. Each tab should be a hyperlink in the form of a bookmark link (#), you should then be able to type in the bookmark url and be taken to that specific tab. Just like this site does:

 

http://validator.w3.org/#validate_by_input

[webster08]

you could use the Yahoo YUI Library; here is a link to what you are looking for:

 

http://developer.yahoo.com/yui/examples/history/history-tabview.html

[Omzy]

Thanks webster08

 

Can't this be done using standard JavaScript?

[webster08]

YUI Library is standard JS; it is just a framework for JS - it just makes it easier, faster & for the most part; cross browser compatible. Plus with the YUI Library; it gives you browser history management. I wrote you a little DHTML Tab Content script; like you wanted, but it does not have browser history management (so please don't ask - cause it's not an easy thing to create - if you want that; go with the YUI or jQuery or etc).

 

<style type="text/css">
#wrapper {
width: 300px;
height: 100px;
}
#tabwrapper {
width: 300px;
height: 100px;
border:solid 1px #000;
background: #FFF;
}
.tabContainers {
width: 100%;
height: 100%;
display: none;
padding: 10px;
}
#tabnav {
margin-top: 25px;
margin-bottom: 10px;
}
.tabs {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
}
.tabsel {
padding: 10px;
background: #FFF;
color: #000;
text-decoration: none;
border: solid 1px #000;
}
#tab1 {
/* Intial Tab Style Onload */
display: block;
}
</style>

<script type="text/javascript">
// tab content switcher
function swap(which,tabber)
{
var ttl_tabs = document.getElementById("tabwrapper").getElementsByTagName("div").length;
for (i=0; i<=ttl_tabs-1; i++) {
document.getElementById("tabwrapper").getElementsByTagName("div")[i].style.display="none";
document.getElementById("tabnav").getElementsByTagName("a")[i].className="tabs";
}
document.getElementById(tabber).className="tabsel";
document.getElementById(which).style.display="block";
}
window.onload = function() {
// bookmark tab selector
var current_hash = document.location.hash;
var getTab = current_hash.split("#")[1];
if (current_hash.length != 0) {
swap(getTab,getTab+"tab");
}
}
</script>

<div id="tabnav">
<a id="tab1tab" class="tabsel" href="#tab1" onclick="swap('tab1',this.id)">Tab 1</a>
<a id="tab2tab" class="tabs" href="#tab2" onclick="swap('tab2',this.id)">Tab 2</a>
<a id="tab3tab" class="tabs" href="#tab3" onclick="swap('tab3',this.id)">Tab 3</a>
</div>

<div id="wrapper">

<div id="tabwrapper">

<div id="tab1" class="tabContainers">
Tab One Content
</div>

<div id="tab2" class="tabContainers">
Tab Two Content
</div>

<div id="tab3" class="tabContainers">
Tab Three Content
</div>

</div>

</div>

[webster08]

here is a some what better version of the above script. you may want to convert the regular href tabs into ul list href tabs. that is fairly common for most navigational type menus and tabs; pretty much fall under the same category, but that is totally up to you. although i would suggest doing that; as you may run into cross browser css issues with my href tab's css.

 

anyway....here is the updated code:

 

<style type="text/css">
#wrapper {
width: 300px;
height: 100px;
}
#tabwrapper {
width: 300px;
height: 100px;
border:solid 1px #000;
background: #FFF;
}
.tabContainers {
width: 100%;
height: 100%;
display: none;
padding: 10px;
font-family:arial;
}
#tabnav {
margin-top: 25px;
margin-bottom: 9px;
}
a.tabs {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:link {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:visited {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:hover {
padding: 10px;
background: #878787;
color: white;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:active {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
.tabsel {
padding: 10px;
background: #FFF;
color: #000;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
border-bottom: solid 0px transparent;
-moz-outline: none;
}
#tab1 {
/* initial onload "tab 1" content wrapper style */
display: block;
}
</style>

<script type="text/javascript">

// tab content switcher
function swap(which,tabber)
{
var ttl_tabs = document.getElementById("tabwrapper").getElementsByTagName("div").length;
for (i=0; i<=ttl_tabs-1; i++) {
document.getElementById("tabwrapper").getElementsByTagName("div")[i].style.display="none";
document.getElementById("tabnav").getElementsByTagName("a")[i].className="tabs";
document.getElementById("tabnav").getElementsByTagName("a")[i].hideFocus="true"; // for IE5.5-
}
document.getElementById(tabber).className="tabsel";
document.getElementById(which).style.display="block";
}

// unobstructive onclick event listener/handler for tabs
function listenerEvent()
{
var all_tabs = document.getElementById("tabnav").getElementsByTagName("a").length;
for (ii=0;ii<=all_tabs-1;ii++) {
document.getElementById("tabnav").getElementsByTagName("a")[ii].onclick = function() {
swap(this.href.split("#")[1],this.id);
}
}
}

// bookmark tab selector for onload event
window.onload = function() {
var current_hash = document.location.hash;
var getTab = current_hash.split("#")[1];
if (current_hash.length != 0) {
swap(getTab,getTab+"tab");
}
// initialize unobstructive onclick event listener/handler for tabs
setTimeout("listenerEvent()",100);
}

</script>

<div id="tabnav">
<a id="tab1tab" class="tabsel" href="#tab1">Tab 1</a>
<a id="tab2tab" class="tabs" href="#tab2">Tab 2</a>
<a id="tab3tab" class="tabs" href="#tab3">Tab 3</a>
</div>

<div id="wrapper">

<div id="tabwrapper">

<div id="tab1" class="tabContainers">
Tab One Content
</div>

<div id="tab2" class="tabContainers">
Tab Two Content
</div>

<div id="tab3" class="tabContainers">
Tab Three Content
</div>

</div>

</div>

[Omzy]

Hi webster,

 

Many thanks for providing that solution. I'm going to implement that shortly.

 

Just a small issue - if the user, for whatever reason enters a non-existent hash value in the URL, it brings up an 'empty' tab and none of the other tabs work:

 

Error: document.getElementById(tabber) is null

 

Can you include some code that will default to the first tab if a non-existent hash value is entered in the URL? (just to cover all angles)

[webster08]

here you go; but that was really simple - you should have caught that one.

 

<style type="text/css">
#wrapper {
width: 300px;
height: 100px;
}
#tabwrapper {
width: 300px;
height: 100px;
border:solid 1px #000;
background: #FFF;
}
.tabContainers {
width: 100%;
height: 100%;
display: none;
padding: 10px;
font-family:arial;
}
#tabnav {
margin-top: 25px;
margin-bottom: 9px;
}
a.tabs {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:link {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:visited {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:hover {
padding: 10px;
background: #878787;
color: white;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:active {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
.tabsel {
padding: 10px;
background: #FFF;
color: #000;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
border-bottom: solid 0px transparent;
-moz-outline: none;
}
#tab1 {
/* initial onload "tab 1" content wrapper style */
display: block;
}
</style>

<script type="text/javascript">

// tab content switcher
function swap(which,tabber)
{
var ttl_tabs = document.getElementById("tabwrapper").getElementsByTagName("div").length;
for (i=0; i<=ttl_tabs-1; i++) {
document.getElementById("tabwrapper").getElementsByTagName("div")[i].style.display="none";
document.getElementById("tabnav").getElementsByTagName("a")[i].className="tabs";
document.getElementById("tabnav").getElementsByTagName("a")[i].hideFocus="true"; // for IE5.5-
}
document.getElementById(tabber).className="tabsel";
document.getElementById(which).style.display="block";
}

// unobstructive onclick event listener/handler for tabs
function listenerEvent()
{
var all_tabs = document.getElementById("tabnav").getElementsByTagName("a").length;
for (ii=0;ii<=all_tabs-1;ii++) {
document.getElementById("tabnav").getElementsByTagName("a")[ii].onclick = function() {
swap(this.href.split("#")[1],this.id);
}
}
}

// bookmark tab selector for onload event
window.onload = function() {
var current_hash = document.location.hash;
var getTab = current_hash.split("#")[1];
if (current_hash.length != 0) {
swap(getTab,getTab+"tab");
}
else {
swap("tab1","tab1tab"); // default tab selection
}
// initialize unobstructive onclick event listener/handler for tabs
setTimeout("listenerEvent()",100);
}

</script>

<div id="tabnav">
<a id="tab1tab" class="tabsel" href="#tab1">Tab 1</a>
<a id="tab2tab" class="tabs" href="#tab2">Tab 2</a>
<a id="tab3tab" class="tabs" href="#tab3">Tab 3</a>
</div>

<div id="wrapper">

<div id="tabwrapper">

<div id="tab1" class="tabContainers">
Tab One Content
</div>

<div id="tab2" class="tabContainers">
Tab Two Content
</div>

<div id="tab3" class="tabContainers">
Tab Three Content
</div>

</div>

</div>

[Omzy]

That didn't work I'm afraid...

 

Still the same error.

[corbin]

I think w3 does it with mootools.  It's also possible with jQuery.

 

 

 

Just throwing some alternatives out there. ;p

[webster08]

ok........this is as far as i can take you with this script. :-X

 

i put in 4 forms of validation, in the script below; beyond that; your on your own. i cannot predict what someone will type in a hash; so i just set-up validation that i could predict.

 

<style type="text/css">
#wrapper {
width: 300px;
height: 100px;
}
#tabwrapper {
width: 300px;
height: 100px;
border:solid 1px #000;
background: #FFF;
}
.tabContainers {
width: 100%;
height: 100%;
display: none;
padding: 10px;
font-family:arial;
}
#tabnav {
margin-top: 25px;
margin-bottom: 9px;
}
a.tabs {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:link {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:visited {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:hover {
padding: 10px;
background: #878787;
color: white;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
a.tabs:active {
padding: 10px;
background: #000;
color: #FFF;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
-moz-outline: none;
}
.tabsel {
padding: 10px;
background: #FFF;
color: #000;
text-decoration: none;
border: solid 1px #000;
font-family:arial;
font-size: 80%;
border-bottom: solid 0px transparent;
-moz-outline: none;
}
#tab1 {
/* initial onload "tab 1" content wrapper style */
display: block;
}
</style>

<script type="text/javascript">

// tab content switcher
function swap(which,tabber)
{
var ttl_tabs = document.getElementById("tabwrapper").getElementsByTagName("div").length;
var current_hash = document.location.hash;
var getTab = current_hash.split("#tab")[1];
var hash_max_length = ttl_tabs.toString().length;
var max_hash_length = 4 + hash_max_length;

/* tab validation - begin */
// detects invalid tab numbers & checks to make sure the word "tab" is in hash
if (getTab > ttl_tabs || current_hash.match("tab") != "tab") {
document.location.replace(document.location.href.split("#")[0]);
}
// detects if the word "tab" is without a tab number
else if (current_hash == "#tab") {
document.location.replace(document.location.href.split("#")[0]);
}
// detects a hash length that is to long
else if (current_hash.length > max_hash_length) {
document.location.replace(document.location.href.split("#")[0]);
}
/* tab validation - end */

for (i=0; i<=ttl_tabs-1; i++) {
document.getElementById("tabwrapper").getElementsByTagName("div")[i].style.display="none";
document.getElementById("tabnav").getElementsByTagName("a")[i].className="tabs";
document.getElementById("tabnav").getElementsByTagName("a")[i].hideFocus="true"; // for IE5.5-
}
document.getElementById(tabber).className="tabsel";
document.getElementById(which).style.display="block";
}

// unobstructive onclick event listener/handler for tabs
function listenerEvent()
{
var all_tabs = document.getElementById("tabnav").getElementsByTagName("a").length;
for (ii=0;ii<=all_tabs-1;ii++) {
document.getElementById("tabnav").getElementsByTagName("a")[ii].onclick = function() {
swap(this.href.split("#")[1],this.id);
}
}
}

// bookmark tab selector for onload event
window.onload = function() {
var current_hash = document.location.hash;
var getTab = current_hash.split("#")[1];
if (current_hash.length != 0) {
swap(getTab,getTab+"tab");
}
// initialize unobstructive onclick event listener/handler for tabs
setTimeout("listenerEvent()",100);
}

</script>

<div id="tabnav">
<a id="tab1tab" class="tabsel" href="#tab1">Tab 1</a>
<a id="tab2tab" class="tabs" href="#tab2">Tab 2</a>
<a id="tab3tab" class="tabs" href="#tab3">Tab 3</a>
</div>

<div id="wrapper">

<div id="tabwrapper">

<div id="tab1" class="tabContainers">
Tab One Content
</div>

<div id="tab2" class="tabContainers">
Tab Two Content
</div>

<div id="tab3" class="tabContainers">
Tab Three Content
</div>

</div>

</div>

 

- Good Luck - I hope this finally did the trick and accomplished what your wanting to do. :-\