-
Multiple DD Tab Menus in the same page
Hi,
I am using DD Tab Menu from http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm and I have a problem with inserting multiple menus in the same page (not multiple tabs in the same menu, but multiple menus). I want to load as "initialtab" the following tabs: scA1, scB1, scC1; and then use them with mouseover.
Here is the code as I modified it:
<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: 10px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
text-decoration: none;
padding: 3px 0.5em;
margin-left: 0px;
border: 1px solid #778;
border-bottom: none;
background: D9E1E1;
}
#tablist li a:link, #tablist li a:visited{
color: #576464;
}
#tablist li a.current{
background: 9CB3B3;
}
#tabcontentcontainer{
width:480px;
height:40px;
}
.tabcontent{
display:none;
}
</style>
<script type="text/javascript">
/***********************************************
* DD Tab Menu 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, "scA1" ]
//Turn menu into single level image tabs (completely hides 2nd level)?
var turntosingle=0 //0 for no (default), 1 for yes
//Disable hyperlinks in 1st level tab images?
var disabletablinks=0 //0 for no (default), 1 for yes
////////Stop editing////////////////
var previoustab=""
if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')
function expandcontent(cid, aobject){
if (disabletablinks==1)
aobject.onclick=new Function("return false")
if (document.getElementById){
highlighttab(aobject)
if (turntosingle==0){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].className=""
aobject.className="current"
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function do_onload(){
collecttablinks()
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)
window.onload=do_onload
</script>
</HEAD>
----
and here are the menus:
<DIV id="tabcontentcontainer">
<div id="scA1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>
<div id="scA2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a>
<div id="scA3" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a>
</div>
</DIV>
<DIV id="tabcontentcontainer">
<div id="scB1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>
<div id="scB2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a>
</div>
</DIV>
<DIV id="tabcontentcontainer">
<div id="scC1" class="tabcontent">
Visit Dynamic Drive for free, award winning DHTML scripts for your site:<br />
</div>
<div id="scC2" class="tabcontent">
<a href="http://www.javascriptkit.com/">Home</a>
</div>
</DIV>
----
The lines given above are just an example of the lines I use in my website.
Thanks,
DD
-
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
Bookmarks