Simple CSS+Javascript content tabbing
The tabbed content layout on my about page always looked yucky after every AJAX request, so I decided to write up some new javascript for it. Turns out, the best way to do it is also the easiest.
This example code has a fixed height, but the CSS can easily be modified for dynamic heights (height:auto; or just leave out the height statements).
The concept behind it is: Onclick of a tab, change everything to either unselected or hidden and based on what you clicked, set a link as current and show the selected tab. Very simple.
This goes somewhere in your .js file or script section on your page.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | function switchtabs(cid, aobject){ var tabobj=document.getElementById("tablist"); var tabobjlinks=tabobj.getElementsByTagName("A"); for (i=0; i<tabobjlinks.length; i++){ tabobjlinks[i].className=""; } var tabs=document.getElementById("tabcontentcontainer"); var tabpages=tabs.getElementsByTagName("DIV"); for (i=0; i<tabpages.length; i++){ if (tabpages[i].className=='tabpage') { tabpages[i].style.display='none'; } } aobject.className="current"; document.getElementById(cid).style.display="block"; } |
The CSS is really not that relavent to this experiment other than the .current class.
| 1 2 3 4 5 6 7 8 9 10 | div.tabpage {display:none; margin:10px; padding:10px; height:270px; border:1px solid #ccc; border-top:1px solid #fff; border-left:1px solid #fff; overflow:auto; background:#fafafa;} #tabcontentcontainer {background: #f0f0f0;padding:0;margin:0; border:1px solid #f0f0f0;clear:both;} #tabcontentcontainer input[type=submit], #tabcontentcontainer input[type=reset] {height:24px; border:1px outset #eee;} #tablistcontainer {border:0;margin:0;padding:0;} #tablist {margin:0;padding:0;} #tablist li {list-style-type: none; margin: 0 5px 0 0; padding: 0; /*width:80px;*/ float:left; display:block; text-align:center;} #tablist li a {border:0; background-color:#f8f8f8; color:#777; text-decoration: none; line-height:15px; margin:0; display:block; padding:5px 10px 4px 10px; cursor: default;} #tablist li a:hover {border:0; background:#f0f0f0; color:#111;} #tablist li a.current {background:#f0f0f0; color:#000; display:block; padding:4px 10px 5px 10px; line-height:15px;} |
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <div id="tablistcontainer"> <ul id="tablist"> <li> <a href="javascript:void(0);" onclick="switchtabs('content1', this);blur();return false;" class="current">Javascript</a> </li> <li> <a href="javascript:void(0);" onclick="switchtabs('content2', this);blur();return false;" class="">CSS</a> </li> <li> <a href="javascript:void(0);" onclick="switchtabs('content3', this);blur();return false;" class="">HTML</a> </li> <li> <a href="javascript:void(0);" onclick="switchtabs('content4', this);blur();return false;" class="">Result</a> </li> </ul> </div> <div id="tabcontentcontainer"> <div class="tabpage" id="content1" style="display:block;"> <!-- content here --> </div> <div class="tabpage" id="content2"> <!-- content here --> </div> <div class="tabpage" id="content3"> <!-- content here --> </div> <div class="tabpage" id="content4"> <!-- content here --> </div> </div> |
This post is a working example of the code descibed in these tabs. The 0xTC About page is also made up in the same manner.
See? Easy as PI....
...
Dude. How about trying some behaviour on that? = http://bennolan.com/behaviour/ I love this code, no more annoying onmouseovers
