asked on

re: Tabnav - how do I lock the subnav?

Hi,
I have a dhtml tabnav that I would like to lock the subnav layer. In other words, it currently displays the layer id="sc1". When you rollover the other toptabs in the toplink layer, I don't want the sublayer to change.
Here is the code that I have so far:
*******************************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="/css/new/base.css" title="SB base styles" />
<link rel="stylesheet" type="text/css" href="css/portal.css" title="" />
<script type="text/javascript">

/***********************************************
* DD Tab Menu II 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"]

//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 editting////////////////

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 && turntosingle==0){
highlighttab(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
}
}

function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collectddimagetabs()
cleartabs()
aobject.className="current"
}

function cleartabs() {
for (i=0; i<tabobjlinks.length; i++)
{
if (i!=initialtab[0]-1)
tabobjlinks[i].className=""
}
}

function collectddimagetabs(){
var tabobj=document.getElementById("ddimagetabs")
tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload(){
collectddimagetabs()
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>
<body class="fclinx">



<div id="min780">


<div id="backgroundline">
      <div id="ddimagetabs">
            <a href="#" onMouseover="expandcontent('sc1', this)" onmouseout="cleartabs()">Financial Consultant</a>
            <a href="#" onMouseover="expandcontent('sc2', this)" onmouseout="cleartabs()">Wealth Management</a>
            <div id="ddimagetabs2"><a href="products_services.html" class="longer" onMouseover="expandcontent('sc3', this)" onmouseout="cleartabs()">Research & Commentaries</a></div>
            <a href="fee_based.html" onMouseover="expandcontent('sc4', this)" onmouseout="cleartabs()">Products & Services</a>
            <a href="specialized_services.html" onMouseover="expandcontent('sc5', this)" onmouseout="cleartabs()">Site Features</a>
      </div>
</div>



<div id="tabcontentcontainer">
      <div id="sc1" class="tabcontent">
            <div id="submenu">
                  <a href="#" class="highlight">Working with a Financial Consultant</a>
                  <a href="#">Developing a Financial Plan</a>
                  <a href="#" class="end">Find a Financial Consultant</a>
            </div>
      </div>

      <div id="sc2" class="tabcontent">
            <div id="submenu">
                  <a href="#">Wealth Management Platform</a>
                  <a href="#">Under the Citigroup Umbrella</a>
                  <a href="#" class="end">The Smith Barney Advantage</a>
            </div>
      </div>

      <div id="sc3" class="tabcontent">

      </div>

      <div id="sc4" class="tabcontent">
            <div id="submenu">
                  <a href="#">Services</a>
                  <a href="#">Planning</a>
                  <a href="#">Products</a>
                  <a href="#" class="end">Managed Money</a>
            </div>
      </div>

      <div id="sc5" class="tabcontent">

      </div>
</div>



</div>

</body>
</html>

*******************************************************
Thanks,
-Ron.

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ron4721

ASKER

Thanks much!