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

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

1 个答案: