使用JavaScript突出显示活动菜单和子菜单

Question

我大部分时间都有这项工作，但我有两个问题：

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'>

让您的网页成为＆＃34; index.html＆＃34;这些文件夹中的文件， （我假设动态页面现在超出了你的限制）

和主页：只需在链接中调用index.html（或其所称的内容）

Answer 2

您的主页链接始终处于活动状态的原因是＆＃34; /＆＃34;总是会出现在网址中。我想你想使用document.location.pathname，而是测试相等性。

对于第二个问题，为什么不在父树上走，直到你不再在链接中？以下是解决这两个问题的示例：

if (document.location.pathname == aObj[i].href) {
    var link = aObj;
    while (link.tagName === 'a') {
        link.className = 'active';
        link = link.parentElement;
    }
}

请务必在onmouseout事件处理程序中删除链中的活动类。

Answer 3

感谢大家的投入。我设法让这个工作，并在我的博客上完整记录了这个过程，你也可以看到结果。

http://www.lync.geek.nz/2015/02/highlight-current-active-menu-using-jquery-or-javascript.html