I am trying to build a webpage with tabs but I am having problems with the tabs themselves. As I add more tabs for some reason all the tabs show at the same time when I click one tab. Is there anyway to hide the contents of one tab while the other is being viewed. Please help. The code is below:
Code:
<html>
<head>
<title>Apricot Consulting Group</title>
<link type="text/css" rel="stylesheet" href="apricot.css"/>
<script type="text/javascript">
var tabLinks = new Array();
var contentDivs = new Array();
function init() {
// Grab the tab links and content divs from the page
var tabListItems = document.getElementById('tabs').childNodes;
for ( var i = 0; i < tabListItems.length; i++ ) {
if ( tabListItems[i].nodeName == "LI" ) {
var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
var id = getHash( tabLink.getAttribute('href') );
tabLinks[id] = tabLink;
contentDivs[id] = document.getElementById( id );
}
}
// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;
for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = 'selected';
i++;
}
// Hide all content divs except the first
var i = 0;
for ( var id in contentDivs ) {
if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
i++;
}
}
function showTab() {
var selectedId = getHash( this.getAttribute('href') );
// Highlight the selected tab, and dim all others.
// Also show the selected content div, and hide all others.
for ( var id in contentDivs ) {
if ( id == selectedId ) {
tabLinks[id].className = 'selected';
contentDivs[id].className = 'tabContent';
} else {
tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
}
}
// Stop the browser following the link
return false;
}
function getFirstChildWithTagName( element, tagName ) {
for ( var i = 0; i < element.childNodes.length; i++ ) {
if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
}
}
function getHash( url ) {
var hashPos = url.lastIndexOf ( '#' );
return url.substring( hashPos + 1 );
}
</script>
</head>
<body onload="init()">
<p> <img src="apricot.jpg" width="312" height="93" class="center"/> </p>
<ul id="tabs">
<li><a href="#aboutus">About Us</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#resources">Resources</a></li>
<li><a href="#computers">Computers</a></li>
</ul>
<div class="tabContent" id="aboutus">
<h1>About Us</h1>
<div>
<p>Apricot Recruitment is a privately owned recruitment consultancy that
has been providing effective business solutions to organisations
throughout the UK. At Apricot Recruitment we help find rewarding
temporary and permanent jobs for the job seeker, as well as provide
companies with highly skilled and motivated staff. Our specially
trained consultants will find high quality candidates that match your
specific requirements. Clients and Candidates alike appreciate the
personal service we offer. Independent status means we always work in
the best interest of our customers and are therefore able to offer
complete flexibility of service. Each assignment is treated
individually in order to match both the client and candidates
requirements.</p>
</div>
</div>
<div class="tabContent" id="services">
<h1>Services</h1>
<div>
<p>Successful companies are built by successful people. Your company
needs the most talented, ambitious and determined individuals in order
to thrive. However, tracking down the ideal candidate can be
challenging. We at Apricot Recruitment help you find that ideal
candidate.</p>
<p>By using our services you are able to outsource all your recruitment
needs to a single recruitment partner who oversees the entire supply
chain. With an in depth knowledge of London Business, Apricot
Recruitment is ideally placed to help you locate and attract the best
possible candidates for your business. We specialise in going the
extra mile to find exactly the candidate to suit your business. Using
industry contacts and numerous research methods, we know precisely
where to look for your desired person.</p>
<p>The first step in recruiting the right candidates for your company is
learning about your business requirements, we thoroughly question,
evaluate and pre-interview all candidates before recommending only the
most appropriate for interview. This ensures you receive the very best
person for your role.</p>
<p>The Apricot Recruitment team uses a range of tools to source the best
possible talent. These tools include:</p>
<ul>
<li>Extensive online and internal database searching.</li>
<li>Advertising in Premium Mediums.</li>
<li>Skills Assessment.</li>
<li>Headhunting.</li>
<li>Reference Checking.</li>
</ul>
</div>
</div>
<div class="tabContent" id="Resources">
<h1>Resources</h1>
<div>
<p>We use lots of resources like monster, totaljobs, gumtree, etc.</p>
</div>
</div>
<div class="tabContent" id="Computers">
<h1>Computers</h1>
<div>
<p>Lots of computers.</p>
</div>
</div>
</body>
</html>
Before you post, read our: 
