View Full Version : Tab it like Yahoo.

12-18-2005, 08:03 AM
Hi all,

I am using this tabbing script.

I want to create a tab menu that look like the http://www.yahoo.com (http://yahoo.com) , such that when the tab is selected and active, I could customise the active anchor tab color only, instead of changing the color of the tag together with the content with it.

Currently, i could only manage to control the look of the content by editing the #SC1 in css. Is there any way to seperate the look of the active tab and the active content? :confused:

Thank you very much.

12-18-2005, 04:17 PM
Find this line in the script:


Change it to this:


12-19-2005, 02:12 AM
Thanks a lot for the fast respond!

However, is it possible to assign a new className to the tab only where i could control the style of it, such as fonts and bg image.


Currently, I could only control the bg color of it which limits the visual I want to create. :o

12-19-2005, 05:29 AM
Perhaps but, I don't think so because the className attribute of the default aobject is in use by the script. However, all of the aobject's id's seem to be available to be put into play. This would leave you free to co-opt the theme attribute to use as a variable to hold the active id name of each individual aobject (in the code):

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
for (i=0; i<tabobjlinks.length; i++)
var themeId=aobject.getAttribute("theme")? aobject.getAttribute("theme") : ''

Then in the markup, ex:

<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="idNum1">What's New</a></li>

This would allow you to define unique style settings for each aobject's active state, ex:

#idNum1 {
define property/value pairs here

The default aobject style would continue to be defined by these rules:

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;

and any setting therein that wasn't changed by the unique active id's style definitions would be retained in the active state.

12-19-2005, 06:15 AM
Thanks a lot!!!

It really works well now

07-13-2006, 02:44 AM

Can you please share the final code...I am having a hard time extracting the Yahoo code..

Thanks in advance !

07-13-2006, 04:12 AM
As far as I can tell, neither Yahoo nor Dynamic Drive are still using the type of tabs that they were when this thread was started last December. I looked over my archives and found this file dated from that time which uses the DD code from that period (we never take code from copyrighted sites like Yahoo, it was just mentioned as an example of how the OP wanted their menu to look). It may or may not be of use:

<style type="text/css">

padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;

#tablist li{
list-style: none;
display: inline;
margin: 0;

#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: white;

#tablist li a:link, #tablist li a:visited{
color: navy;

#tablist li a.current{
background: lightyellow;

width: 400px;
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid black;



<script type="text/javascript">

* Tab Content script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

////////Stop editting////////////////

function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)

var previoustab=""

function expandcontent(cid, aobject){
if (document.getElementById){
if (previoustab!="")
if (aobject.blur)
return false
return true

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
for (i=0; i<tabobjlinks.length; i++)
for (i=0; i<tabobjlis.length; i++)
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor

function collecttablinks(){
var tabobj=document.getElementById("tablist")

function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs

function do_onload(){
var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)


<script type="text/javascript">

//Dynamicdrive.com persistence feature add-on

var enablepersistence=true //true to enable persistence, false to turn off (or simply remove this entire script block).
var persisttype="local" //enter "sitewide" for Tab content order to persist across site, "local" for this page only

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
return returnvalue;

function savetabstate(){
var cookiename=(persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookievalue=(persisttype=="sitewide")? tabsourceindex+"|"+previoustab+";path=/" : tabsourceindex+"|"+previoustab


<ul id="tablist">
<li><a href="http://www.dynamicdrive.com" class="current" onClick="return expandcontent('sc1', this)">Dynamic Drive</a></li>
<li><a href="new.htm" onClick="return expandcontent('sc2', this)" theme="#EAEAFF">What's New</a></li>
<li><a href="hot.htm" onClick="return expandcontent('sc3', this)" theme="#FFE6E6">What's Hot</a></li>
<li><a href="search.htm" onClick="return expandcontent('sc4', this)" theme="#DFFFDF">Search</a></li>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />

<div id="sc2" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/new.htm">What's New</a> section to see recently added scripts to our archive.

<div id="sc3" class="tabcontent">
Visit our <a href="http://www.dynamicdrive.com/hot.htm">Hot</a> section for a list of DD scripts that are popular to the visitors.

<div id="sc4" class="tabcontent">
<form action="http://www.google.com/search" method="get" onSubmit="this.q.value='site:www.dynamicdrive.com '+this.qfront.value">
<p>Search Dynamic Drive:<br />
<input name="q" type="hidden" />
<input name="qfront" type="text" style="width: 180px" /> <input type="submit" value="Search" /></p>


You may want to use the updated Dynamic Drive version instead: