Question

我正在尝试将css标记添加到我的菜单中以识别当前页面和当前父菜单，如下所示： http://myweb.com/#about -这是一个有孩子喜欢的父菜单 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

以下代码可以帮助您

Jquery的：

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

Answer 2

这可能不是通用解决方案，但如果这可以解决您的问题，请尝试。

尝试将ID提供给您的li，如下所示

<html>
    <body>

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

            </ul>
            </li>
    </ul>
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        var url=$(location).attr('href');
        alert(url);
        if(url.indexOf("history")>=0)
        {
          ("#about").addClass("current-menu-item");
          ("#history").addClass("current-menu-item");

        }
        else if(url.indexOf("vision")>=0)
        {
          ("#about").addClass("current-menu-item");
          ("#vision").addClass("current-menu-item");
        }
    }); 
    </script>
    </body>
</html>

将css附加到当前菜单

2 个答案: