Question

我在asp.net网站上创建了一个菜单，我希望菜单中的活动菜单项在单击时突出显示。通常菜单是白色，但当用户选择任何菜单时，它应该变为红色。请在下面找到我到目前为止所尝试的内容：

Jquery的：

 <head runat="server">
   <script type="text/javascript">
    $('.thumbnail').click(function (e) {
        $('.thumbnail').removeClass('selected');
        $(this).addClass('selected');
    });
  </script>
 <asp:ContentPlaceHolder ID="head" runat="server">
 </asp:ContentPlaceHolder>
</head>

aspx页面：

 <div id="nav">
        <ul>
            <li><a href="Default.aspx" class="thumbnail">Dashboard</a> //I want this
               menu option to be Red when in the Dashboard page.

                <ul>
                    <a href="Default.aspx" class="hover">
                        <li>Servie Details</li>
                    </a><a href="Dashboard_totalusersDaily.aspx" class="hover">
                        <li>Subscribers History</li>
                    </a><a href="WhiteList.aspx" class="hover">
                        <li>Whitelist </li>
                    </a>
                </ul>
            </li>
            <li><a href="mnggroup.aspx" class="thumbnail">Subscribers</a> //I want this
              Subscrivers Menu Option to be Red when user is in this page
                <ul>
                    <a href="mnggroup.aspx" class="hover">
                        <li>Group</li>
                    </a>
                    <a href="#" class="hover">
                        <li>Subscribers Chart</li>
                    </a>
                    <a href="#" class="hover">
                        <li>Subscribers Chart by Date </li>
                    </a>
                    <a href="#" class="hover">
                        <li>Inactive Subscribers Chart</li>
                    </a>
                </ul>

            </li>
      </div>

CSS：

     .thumbnail {
    display: block;
    line-height: 2.5em;
    margin-right: 0px;
    padding: 8px 14px 8px 14px;
    color: #3d3737;
    font-weight: bold;
    font-size: 0.8em;
    text-decoration: none;
  }

  #nav ul li .selected {
    color: #ffffff;
    background-color: transparent;
    background-image: url(../Img/navaktiv.jpg);
    background-repeat: repeat-x;
}

我从以下链接获得了上述代码构思：how to change menu background color when selected?

尝试上面的代码后，我的所有菜单项都保持白色。当我选择任何选项时，它不会变红。请帮忙。提前谢谢。

Answer 1

问题在于你的CSS。你在＆＃34; li＆＃34;之间增加了空间。和班级＆＃34;选择＆＃34;。
它应该是"#nav ul li.selected"。

同时在$(document).ready()功能中添加您的代码在HTMl＆＃34; head＆＃34;中添加以下代码

<script src="//code.jquery.com/jquery-1.10.2.js"></script>    
<script type="text/javascript">  
    $( document ).ready(function() {  
        $('.thumbnail').click(function (e) {  
            $('.thumbnail').removeClass('selected');  
            $(this).addClass('selected');  
        });  
    });  
</script>

在CSS底部添加： -

#nav ul li.selected {  
    color: #ffffff;  
    background: url(../Img/navaktiv.jpg) repeat-x red;  
}

Answer 2

因为您没有为所选的样式将背景颜色设置为红色：

#nav ul li .selected {
  color: #ffffff;
  background-color: red;
  background-image: url(../Img/navaktiv.jpg);
  background-repeat: repeat-x;
}

<强>更新

确保已在DOM ready中添加了单击处理程序：

 $(document).ready(function() {
    $('.thumbnail').click(function (e) {
        $('.thumbnail').removeClass('selected');
        $(this).addClass('selected');
    });
 });

Answer 3

由于您将jQuery代码放在<head>部分中，请尝试将它们包含在 DOM ready 处理程序中。

$(function() {
    $('.thumbnail').click(function (e) {
        $('.thumbnail').removeClass('selected');
        $(this).addClass('selected');
    });
});

Answer 4

试试这个：

<script type="text/javascript">
    $( document ).ready(function() {
        $('.thumbnail').click(function (e) {
            $('.thumbnail').removeClass('selected');

            // How about using some troubleshooting code while you're developing this?
            console.log($(this));                
            console.log($(this).attr('class'));
            $(this).addClass('selected');
        });
    });
</script>

如何在选择时更改菜单颜色？

4 个答案: