Facebooks "Tab" functionality

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

Post Reply
ems.customer
Forum Newbie
Posts: 1
Joined: Thu Nov 26, 2009 8:01 am

Facebooks "Tab" functionality

Post by ems.customer »

I want to implement Facebooks "Tab" functionality to add modules dynamically
Anybody has idea How to implement it ??

I basically want How the div structure will be and css help
User avatar
BlaineSch
Forum Commoner
Posts: 28
Joined: Sun Jun 07, 2009 4:28 pm
Location: Trapped in my own little world.

Re: Facebooks "Tab" functionality

Post by BlaineSch »

It's javascript basically. You'd have your tabbed looking links at the top but those would basically just call a function, the function would switch the image or color of the one clicked and the one that was clicked before hand to look like the others, hide the current div box and unhide the one you selected. I'd probably just switch classes of everything that would be the easiest.

Code: Select all

<html><head><title>BlaineSch.com</title><style>    a.selected {        display:block;        border: 2px 2px 2px 2px;        padding:10px;        background: #546c9b;        width:50px;        float:left;    }    a.unselected {        display:block;        border: 2px 2px 2px 2px;        padding:10px;        background: #7e89a1;        width:50px;        float:left;    }    div.selected {        margin: 30px 0px 0px 0px;        display:block;        border: 2px 2px 2px 2px;        padding:10px;        background: #9fadc9;    }    div.unselected {        display:none;    }</style><script>    function switchey(a, b) {        var links = document.getElementsByTagName("a");         for (var i = 0; i < links.length; i++) {             if(links[i].className=="selected") {                links[i].className = "unselected";            }        }        var boxes = document.getElementsByTagName("div");         for (var i = 0; i < boxes.length; i++) {             if(boxes[i].className=="selected") {                boxes[i].className = "unselected";            }        }        document.getElementById(a).className="selected";        document.getElementById(b).className="selected";    }</script></head><body><a class="selected" id="home" href="javascript&#058;switchey('home', 'home1');">Home</a><a class="unselected" id="wall" href="javascript&#058;switchey('wall', 'wall1');">Wall</a><a class="unselected" id="info" href="javascript&#058;switchey('info', 'info1');">Info</a><br /><div class="selected" id="home1">This is the homepage information :)</div><div class="unselected" id="wall1">This is the wall information :)</div><div class="unselected" id="info1">This is the info information :)</div></body></html>
Post Reply