javascript - 使用 JavaScript 突出显示事件菜单和子菜单

Question

我基本上完成了这项工作，但是我有 2 个问题:

1. 主菜单链接始终保持事件状态
2. 当我选择一个子菜单项时，该子菜单项显示为事件状态，但我还要求父菜单项保持事件状态。

在此处查看实时站点 - http://www.lync.geek.nz/

JavaScript:

<script type='text/javascript'>
//<![CDATA[
function setActive() {
  aObj = document.getElementById('nav').getElementsByTagName('a');
  for(i=0;i<aObj.length;i++) { 
    if(document.location.href.indexOf(aObj[i].href)>=0) {
      aObj[i].className='active';
    }
  }
}
//]]>
</script>

HTML 菜单:

<!-- start navmenu -->
<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='/p/tools.html'>Tools</a>
<ul>
<li><a href='/p/admin-tools.html'>Admin Tools</a></li>
<li><a href='/p/call-accounting.html'>Call Accounting/Reporting</a></li>
<li><a href='/p/lync-phone-edition-log-viewer.html'>Phone Edition Log Viewer</a></li>
<li><a href='/p/sonus-sbc-5kswe-log-viewer.html'>Sonus SBC 5k/SWe Log Viewer</a></li>
<li><a href='/p/customer-support-tool.html'>Customer Support Tool</a></li>
<li><a href='/p/powershell-scripts.html'>PowerShell Scripts</a></li>
<li><a href='/p/powershell-one-liners.html'>PowerShell One-Liners</a></li>
</ul>
</li>
<li><a href='/p/lync-updates.html'>Lync Updates</a>
<ul>
<li><a href='/p/lync-updates.html#Lync2013Server'>Lync 2013 Server</a></li>
<li><a href='/p/lync-updates.html#Lync2010Server'>Lync 2010 Server</a></li>
<li><a href='/p/lync-updates.html#Lync2013WinClient'>Lync 2013 Client</a></li>
<li><a href='/p/lync-updates.html#Lync2010WinClient'>Lync 2010 Client</a></li>
<li><a href='/p/lync-updates.html#LyncMacClient'>Lync for Mac</a></li>
<li><a href='/p/lync-updates.html#LyncStoreApp'>Lync Store App</a></li>
<li><a href='/p/lync-updates.html#LyncRoomSystem'>Lync Room System</a></li>
<li><a href='/p/lync-updates.html#LyncPhoneEdition'>Lync Phone Edition</a></li>
</ul>
</li>
<li><a href='#'>Training</a>
<ul>
<li><a href='/p/end-user-training.html'>End User</a></li>
<li><a href='/p/troubleshooting.html'>Troubleshooting</a></li>
<li><a href='/p/sip.html'>SIP</a></li>
</ul>
</li>
<li><a href='/p/deployment.html'>Deployment</a></li>
<li><a href='/p/about.html'>About</a></li>
<li><a href='/p/contact.html'>Contact</a></li>
</ul>
<!-- end navmenu -->

CSS:

/*DROPDOWN MENU MOD*/

/* ----- CSS Nav Menu Styling ----- */
#nav {
margin: 0px 0 0 0px;
padding: 0px 0px 0px 0px;
width: 1148px;  /* Set your width to fit your blog */
/*font: $(tabs.font); Template Designer - Change Font Type, Size, Etc */
/*color: $(tabs.text.color); Template Designer - Change Font Size */
}

ul#nav li a.active {
    position: relative;
    z-index: 1;
    background: #dd7700 none repeat scroll bottom;
    color: #ffffff;
    -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .15);
    box-shadow: 0 0 0 rgba(0, 0, 0, .15);
}

#nav ul {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
height: 20px; /* Change Height of Menu */
list-style: none;
margin: 0px;
padding: 0px;
}

#nav li {
float: left;
padding: 0px;
}

#nav li a {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
display: block;
margin: 0px;
/*font: $(tabs.font); Template Designer - Change Font Type, Size, Etc */
text-decoration: none;
}

#nav > ul > li > a {
/*color: $(tabs.text.color); Template Designer - Change Font Color */
}

#nav ul ul a {
/*color: $(tabs.text.color); Template Designer - Change Color */
}

#nav li > a:hover, #nav ul li:hover {
*/color: $(tabs.selected.text.color); Template Designer - Change Font Color on Hover */
/*background-color: $(tabs.selected.background.color); Template Designer - Change Font Background on Hover */
text-decoration: none;
}

#nav li ul {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Menu Background */
display: none;
height: auto;
padding: 0px;
margin: 0px;
position: absolute;
width: 300px; /* Change Width Of DropDown Menu */
z-index:9999;
}

#nav li:hover ul {
display: block;
}

#nav li li {
/*background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;*/
_background-image: none; /* Template Designer - Change Background */
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 300px; /* Change Width Of DropDown Menu */
}

#nav li:hover li a {
/*background: $(tabs.selected.background.color); Template Designer - Change Background of Link on Hover */
}

#nav li ul a {
display: block;
height: auto;
margin: 0px;
padding: 10px;
text-align: left;
}

#nav li ul a:hover, #nav li ul li:hover > a {
/*color: $(tabs.selected.text.color); Template Designer - Change Text Color on Hover */
/*background-color: $(tabs.selected.background.color); Template Designer - Change Background on Hover */
border: 0px;
text-decoration: none;
}
/*DROPDOWN MENU MOD*/

这是一个发生的例子:

任何指导将不胜感激。

Answer 1

您可能需要重新考虑您的链接层次结构/架构并使用文件夹重组您的链接:

<li><a href='/p/tools/'>Tools</a>
<ul>
<li><a href='/p/tools/admin-tools'>

并让您的页面成为这些文件夹中的“index.html”文件，(我假设动态页面目前超出了您的限制)

对于主页:只需在链接中调用 index.html(或任何名称)