高亮顯示當前頁面菜單項。 選擇子菜單項時也突出顯示主菜單項

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');
        });
    });