javascript - 突出显示当前页面菜单项。当选择子菜单项时也突出显示主菜单项

Question

我正在使用 C# 在 ASP.net 中开发一个元素。我有一个母版页，其中有一个菜单，其中包含一些菜单项的子菜单。
我希望当前页面菜单项在选中时突出显示。此外，我希望在选择任何子菜单项或在同一页面中打开它们的链接时突出​​显示主菜单项。
任何使用 CSS 或 Javascript 的想法或解决方案都是可以接受的。我在这个论坛上搜索过解决方案，但我的要求不同，所以我至今未能找到可行的解决方案。

<pre>

Javascript:

 <script src="../Scripts/jquery-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#nav').find('li a').click(function () {
                $('#nav').find('li a').removeClass('active');
                $(this).addClass('active');
                $($(this).closest('li.menu-item').children()[0]).addClass('active');
            });
        });

    </script>
</pre>
<pre>

CSS:

#nav {
    height: 50px;
    width: auto;
    position: relative;
    background-color: #ad8f5d;      
}

#nav ul li {

    width:150px;
    text-align:center;
} 

#nav ul li a 
{
    color: Black;
    font-size: 13px;
    font-weight: bold;
    line-height:50px;
    text-decoration: none;  
}

 #nav li a.active 
 {
    color:White; 

 }


#nav ul li a.has_submenu {
    background: transparent url('../Images/submenu-item.jpg') no-repeat scroll right center;
    padding-right: 0px;
}

#nav ul li a.has_submenu:hover, #nav ul li.sfHover a.has_submenu {
    background-image: url('../Images/submenu-item-hover.jpg');
}
#nav ul ul li a.has_submenu {
    background: transparent url('../Images/submenu-item-invert.jpg') no-repeat scroll right center;
    padding-right: 0px;
}
#nav ul ul li a.has_submenu:hover, #nav ul ul li.sfHover a.has_submenu {
    background-image: url('../Images/submenu-item-hover-invert.jpg');
}

#nav ul ul li a { 
    float: none; 
    width: 170px;
}

#nav ul > li:hover > a
{
    background-color: #1f478d;
}

#nav ul ul > li:hover > a
{
    background-color: #1f478d;
}

/*--------------------------Item Image Hover change---------------------CSS----*/

#nav ul > li:hover > a.has_submenu
{
    background-image: url('../Images/submenu-item-hover.jpg');
}

#nav ul ul > li:hover > a.has_submenu
{
   background-image: url('../Images/submenu-item-hover-invert.jpg');
}

/*--------------------------Item Image Hover change---------------------CSS ends----*/


#nav ul li a:hover, #nav ul li.sfHover a{

    background-color: #1f478d;

}
#nav ul ul a 
{

background-color: #ad8f5d;
}

#nav ul li li a:hover, #nav ul li.sfHover li a:hover {
    background-color: #1f478d;

} 


.sf-menu, .sf-menu * 
{
    height:50px;
    margin:         0;
    padding:        0;
    list-style:     none;
}

.sf-menu ul {
    position:       absolute;
    top:            -999em;
    width:          200px; 
    margin-top:     0px;
    padding-top:    0;
}
.sf-menu ul li {
    width:          100%;
}
.sf-menu li:hover {
    visibility:     inherit; 
}
.sf-menu li {
    float:          left;
    position:       relative;
}
.sf-menu a {
    display:        block;
    position:       relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
    left:           0;
    top:            49px; 
    z-index:        99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
    left:           170px; 
    top:            0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
    top:            -999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
    left:           10em; 
    top:            0;
} 
</pre>

<pre>

HTML:

 <div id="nav">
        <ul class="sf-menu">
            <li class="menu-item"><a href="Home.aspx">Home</a></li>
            <li class="menu-item"><a class="has_submenu" href="#">Examples</a>
                <ul>
                    <li><a href="Static.aspx">Static Text Page</a></li>
                    <li><a href="#">Static Frontpage</a></li>
                    <li><a href="#">Another link</a></li>
                </ul>
            </li>
            <li   class="menu-item"><a class="has_submenu" href="#">Products</a>
                <ul>
                    <li><a href="Product.aspx">Product One</a></li>
                    <li><a href="#">Product Two</a></li>
                    <li><a href="#">Product Three</a></li>
                </ul>
            </li>
            <li  class="menu-item"><a href="#">Solutions</a></li>
            <li class="menu-item"><a href="#">Contact</a></li>
        </ul>
      </div>
</pre>

Answer 1

使用此代码，如果您需要更多，请问我。

    $(document).ready(function () {
        $('.menu-item').click(function () {
            alert("S");
            $('.menu-item a').css("color","black");
            $(this).find('a').css("color","red");
           // $($(this).closest('li.menu-item').children()[0]).addClass('active');
        });
    });