javascript - 将 css 附加到当前菜单

Question

我正在尝试将 css 标记添加到我的菜单以标识当前页面和当前父菜单，如下所示: http://myweb.com/#about - 这是一个带有 child 的父菜单 http://myweb.com/about/history - 这是一个有内容的页面 http://myweb.com/about/vision -这是一个有内容的页面

这是标记

<ul id="menu"  class="nav-main">                         
<li><a href="#about">About</a> 
<ul>
<li><a href="http://www.myweb.com/about/history">History</a></li>
<li><a href="http://www.myweb.com/about/vision">Vision</a></li>
</ul>
</li>
<li><a href="#contact">contact</a> 
<ul>
<li>.....</li>
</ul>
</li>
</ul>

我有下面的javascript

<script type="text/javascript">
$("ul#menu.nav-main li a[href='#@Request.Url.LocalPath.Split('/')[1]']").parent("li").addClass("current-menu-item");
</script>

这标记父菜单和所有子菜单而不是所需的。那是;仅标记父菜单和特定页面。例如在 http://myweb.com/about/history我只想要那个页面和http://myweb.com/#about要标记的父菜单。任何帮助将不胜感激

Answer 1

下面的代码可以帮到你

J查询:

//for example i hardcoded the url below
var url='http://www.myweb.com/parent-info/stuff';
//when you test in live replace above code by below
//var url $(location).attr('href') 
var url_cnt=url.split('/');
if(url_cnt[url_cnt.length-1].length != 0 && url_cnt[url_cnt.length-2].length!=0){
$("#menu a").filter(function(){ return $(this).text().toLowerCase().indexOf(url_cnt[url_cnt.length-1].toLowerCase()) > -1;}).addClass("current-menu-item");
$("#menu a").filter(function(){ return $(this).text().toLowerCase().indexOf(url_cnt[url_cnt.length-2].toLowerCase()) > -1;}).addClass("current-menu-item");
}

这是最新更新的 JSFiddle dinn:http://jsfiddle.net/jvyLtr82/17/