Javascript 选择后如何更改菜单颜色？_Javascript_Jquery_Html_Asp.net_Css

Javascript 选择后如何更改菜单颜色？

javascript jquery html asp.net css

Javascript 选择后如何更改菜单颜色？,javascript,jquery,html,asp.net,css,Javascript,Jquery,Html,Asp.net,Css,我已经在我的asp.net网站中创建了一个菜单，我希望菜单中的活动菜单项在单击时高亮显示。这通常是菜单是白色的，但当用户选择任何一个菜单时，它应该变成红色。请查找以下我迄今为止尝试过的内容： Jquery： <head runat="server"> <script type="text/javascript"> $('.thumbnail').click(function (e) { $('.thumbnail').removeClass

我已经在我的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>

我从这个链接中获得了上述代码理念：

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

因为您尚未在样式中将所选内容的背景色设置为红色：

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

因为您将jQuery代码放在

部分，所以请尝试将它们包装在处理程序中

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

试试这个：

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


$（文档）.ready（函数（）{
$（'.缩略图'）。单击（函数（e）{
$（'.thumbnail'）.removeClass（'selected'）；
//在开发这个程序时使用一些疑难解答代码怎么样？
log（$（this））；
log（$（this.attr（'class'））；
$（this.addClass（'selected'）；
});
});

问题出在您的CSS中。您已在“li”和“selected”类之间添加了空格。
它应该是

“#nav ul li.selected”

同时将您的代码添加到

$（document）.ready（）函数中

在HTMl“head”中添加下面提到的代码
对不起，我弄错了。实际上背景图像已经是红色的，所以我希望它接受背景图像。谢谢。您是否已检查cass selected是否已添加到所选元素。是的，我已尝试。它正确地调用了CSS类。谢谢，谢谢你的回答。但是我对Jquery还很陌生，所以我对DOM不是很清楚。请您解释一下。您是否检查了我在回答中提供的链接中的文档？在文档“就绪”之前，页面无法安全操作。jQuery会为您检测到这种就绪状态。$（document）.ready（）中包含的代码只有在页面文档对象模型（DOM）准备好让JavaScript代码执行后才会运行。谢谢您的建议。我已经试过了，但还没有希望。但当我尝试从这个链接的例子：它的工作。但它也在改变子菜单的颜色。但我只在主菜单上需要它。请你帮忙好吗？谢谢。然后仔细检查你的CSS代码，并在调试器上设置一个断点（例如FF的Firebug），然后逐行检查你的锚标记对更改的反应。非常感谢。是的，我尝试使用Firebug进行检查，发现它将正确地应用到CSS代码中。但当我尝试从这个链接示例：它是有效的。但它也在改变子菜单的颜色。但我只在主菜单上需要它。请你帮忙好吗？谢谢。请使用和格式化您的答案，使其更具可读性。非常感谢您的答案。但它不起作用。我不知道我的代码有什么问题。当我尝试这个链接时，例如：它正在工作。但它会突出显示我不想要的子菜单。我只想突出显示主菜单。谢谢。Colud您在这里与fireebug openCheck共享屏幕截图，其中“li.thumbnail”处于单击状态，链接如下。希望这是你需要的。非常感谢，这对我来说真的很有效。你救了我一天。再次感谢。
$(function() {
    $('.thumbnail').click(function (e) {
        $('.thumbnail').removeClass('selected');
        $(this).addClass('selected');
    });
});

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

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

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