SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2006
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Show - hide tabs, need some extra functionality

    I have found this script at:
    http://bonrouge.com/~switchcontent3

    it is really working nice for my needs, and is quite simple especially for some one that has absolutely no idea about javascript.

    The script is actually a tab system when you click in one of the "buttons" the specified tag is opening.

    I need just some more functionality: to assign at the selected button a class="selected" in order to style the selected tab differently,

    So I really tried some different ways (please don't laugh I am new to this part), but until my copy of "The JavaScript Anthology" is here I have to finalize this

    so the javascript is :


    function hidestories() {
    var divs=document.getElementById('stories').getElementsByTagName('div');
    for (j=0; j<divs.length; j++) {
    var rE = new RegExp("(^|\\s)" + 'story' + "(\\s|$)");
    if (rE.test(divs[j].className)) {
    divs[j].style.display="none";
    }
    }
    }

    function stories(first) {
    var thebuttons=document.getElementById('thebuttons').getElementsByTagName('a');
    for (i=0; i<thebuttons.length; i++) {
    thebuttons[i].onclick=function() {
    hidestories();
    var thestory=(this.href).split("#",2)[1];
    document.getElementById(thestory).style.display="block";
    return false;
    }
    }
    if (first) {
    var firstone=document.getElementById('stories').firstChild;
    if (firstone.nodeType != 1) {firstone = firstone.nextSibling;}
    firstone.style.display="block";
    }
    }
    window.onload=function() {
    hidestories();
    stories(1);
    }

    and the html is

    <ul id="thebuttons">
    <li><a href="#storyA">Story A</a></li>
    <li><a href="#storyB">Story B</a></li>
    </ul>
    <div id="stories">
    <div id="storyA" class="story">
    here goes the content of tab a
    </div>
    <div id="storyB" class="story">
    here goes the content of tab b
    </div>
    </div>


    Thanks in advance for your help

  2. #2
    SitePoint Guru
    Join Date
    Apr 2007
    Posts
    813
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you check out how yahoo ui implement their tabbing system, you can even add your own callback function. It is quite handy anc configurable. I suggest you might want to use yui for your experiment.


Bookmarks

Posting Permissions

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