dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: issue with tabs not displaying content when chlicking

  1. #1
    Join Date
    Mar 2015
    Posts
    2

    issue with tabs not displaying content when chlicking

    Hi Folks,

    Wondering if someone can assist, i am encountering an issue with the tabs at the top of the page, whats supposed to occur is that when you click a tab at the top it should change color, In addition it should call the div content per page.

    Not understanding why its not working, I have checked the code at least 3 - 4 times, could you assist? below is the pastebin to the code:

    http://pastebin.com/0PahaW1p

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,650

    Smile

    The capitalization of your <div> sections does not match the initilization.
    Should be:
    PHP Code:
                d1 document.getElementById("Home");
                
    d2 document.getElementById("Budget");
                
    d3 document.getElementById("Location");
                
    d4 document.getElementById("Contact"); 

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,650

    Lightbulb

    Here is a similar display (uses buttons instead of anchors), but has much less redundancy.
    PHP Code:
    <!DOCTYPE html>
    <
    html lang="en">
    <
    head>
    <
    meta charset="UTF-8" />
    <
    titleButton Selection </title>
    <
    style type="text/css">
     .
    btn  background-color:limecolor:blackfont-size:1.5em; }
     .
    btnC background-color:#ffff00; font-size:1.5em; }

     
    .show displayblock; }
     .
    hide displaynone; }
    </
    style>
    </
    head>
    <
    body>
    <
    p>
    <
    div id="btnDiv"> <!-- NoteIDs of 'contents' below is same a button value below without spaces -->
     <
    input type="button" class="btn" value="Button 1">
     <
    input type="button" class="btn" value="Button 2">
     <
    input type="button" class="btn" value="Button 3">
     <
    input type="button" class="btn" value="Button 4">
    </
    div>
    <
    p>

    <
    hr>
    <
    div id="contents">
     <
    div id="Button0" class="show">Default contents.  Press "Button" for displays</div>
     <
    div id="Button1" class="hide">Contents to display for 'Button 1'</div>
     <
    div id="Button2" class="hide">Contents to display for 'Button 2'</div>
     <
    div id="Button3" class="hide">Contents to display for 'Button 3'</div>
     <
    div id="Button4" class="hide">Contents to display for 'Button 4'</div>
    </
    div>

    <
    script type="text/javascript">
    function 
    elem(IDS) { return document.getElementById(IDS); }

    function 
    init() {
      var 
    sel elem('btnDiv').getElementsByClassName('btn');
      for (var 
    i=0i<sel.lengthi++) {
        
    sel[i].onclick = function() { btnAction(this); }
      }
    init();

    function 
    btnAction(info) {
      var 
    cls info.className;  // save current className status

      
    var sel elem('btnDiv').getElementsByTagName('input');
      for (var 
    i=0i<sel.lengthi++) { sel[i].className 'btn'; }
      
    info.className = (cls == 'btnC') ? 'btn' 'btnC';

      var 
    IDS info.value.replace(/\s/g,'');
          
    sel elem('contents').getElementsByTagName('div');
      for (var 
    i=0i<sel.lengthi++) { sel[i].className 'hide'; }
      if (
    cls == 'btn') { elem(IDS).className 'show'; }
                   else { 
    elem(IDS).className 'hide'; }

      if (
    elem(IDS).className == 'hide') { elem('Button0').className 'show'; }
    }
    </script>
    </body>
    </html> 

  4. #4
    Join Date
    Mar 2015
    Posts
    2
    Hey jmrker,

    Thanks, you fixed my problem the 2nd solution is too advanced with my current skillset but i will get there

    have a great day

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles