Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Trouble with tabs

    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>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello apricot123,
    We kind of need to see apricot.css too. Even better, link us to the test site.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    apricot123 (01-02-2013)

  • #3
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I don't know why the last post didn't appear but here are the files attached with this message.
    Attached Files Attached Files

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Ahh, I see what you're doing now.
    Have a look at a demo of mine, it may be a simpler way of doing it... http://nopeople.com/CSS%20tips/new_e...her/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    apricot123 (01-02-2013)

  • #5
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I know this might be asking for a lot but I had a look at your code and it might take me some time to digest. Is there anyway you could tell me why mine is not working? Is it a problem with the JS code or with html? Once again thank you very much for your help.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •