Menu
Hi, I have developed a tabs menu with iframes.
My problem is, Not able to make a tab active by default.
description:
i have curved-corner tabs. (i am using two gif images. One for left and one for right corner….) Each gif image contains 3 images in it for
active: hover: and visited event. I am using CSS: background-position property to animate the tab( moving control top, bottom and middle on the image which contains 3 images in it).
Problem is: I am not able to make one tab as default tab and position the control over required image. code as follows:
[code]
/*.css file*
.glowingtabs li{
display:inline;
margin:0;
padding:3px 5px 3px 5px;
color: #383838;
font: small-caps 13px Arial, Helvetica, sans-serif;
font-weight: bold;
}
.glowingtabs li a{
float:left;
background:url(img/TabLeft.gif) no-repeat left top;
margin:0;
margin-right: -6px; /*spacing between each tab*/
padding:0 0 0 7px;
text-decoration:none;
}
.glowingtabs a span{
float:left;
display:block;
background:url(img/TabRight.gif) no-repeat right top;
padding:5px 12px 3px 3px;
font-weight:bold;
color:#3B3B3B;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
.glowingtabs a span {float:none;}
/* End IE5-Mac hack */
.glowingtabs a:visited{ /*Selected Tab style*/
background-position:0 0; /*Shift background image up to start of 2nd tab image*/
}
.glowingtabs a:visited span{ /*Selected Tab style*/
background-position:100% 0; /*Shift background image up to start of 2nd tab image*/
}
.glowingtabs a:hover{
background-position:0 -30px;
}
.glowingtabs a:hover span {
background-position:100% -30px;
color: #383838;
}
.glowingtabs a:active{
background-position:0% -60px;
}
.glowingtabs a:active span {
background-position:100% -60px;
color: #FFFFFF;
}
[code]
/*html file*/
<HTML>
<HEAD>
<TITLE>tab</TITLE>
<link href=”tab_style.css” rel=”stylesheet” type=”text/css” media=”screen” />
<script type=”text/javascript” src=”tab_test.js”>
</script>
</head>
<body onLoad=”dTab(‘tabIframe’)”>
<div class=”tabBox”>
<div class=”tabarea”>
<div class=”glowingtabs”>
<ul>
<li onClick=”removeDefault()”><a href=”India.html” target=”tabIframe”><span>India</span></a></li>
<li id=”select”><a href=”America.html” target=”tabIframe” rel=”indexTab”><span>America</span></a></li>
<li onClick=”removeDefault()”><a href=”Canada.html” target=”tabIframe”><span>Canada</span></a></li>
</ul>
</div>
</div>
<!———— ————–code for iframes ———————–> <div class=”tabMain”>
<div class=”tabIframeWrapper”>
<iframe class=”tabContent” name=”tabIframe” src=”America.html”>
aaaaaaaaaaa
</iframe>
</div>
</div>
<div>
<!————————–end of iframes————————————>
</BODY>
</HTML>
[code]
/*java Script*/
function dTab(frameName){var linkList=document.getElementById(“select”);
if (linkList!=null)
{
alert(“id with select exists”);
linkList.className += ” defaultTab”;
}
}
function removeDefault() {
alert(“witn in removeDefault”);
}
I am not able to make default tab with the same properties of .glowingtab:active span{}
i am totally struct. Please help me. I want tab America to have red color image which is in the bottom of 3 imaged gif.
please help me
Regards,
Ash