javascript - 无法让 jQuery addClass ("active") 工作

标签 javascript jquery html css addclass

这是对我的代码的一些简化,但我认为该示例有效。基本上,我想做的是使用 jQuery 自动突出显示选定的 div 元素。

目前,只有在我按住该元素(背景变为橙色)时,div 元素才会显示为“事件”。

<html>
<head>
    <title>Samuels HTML-inlämning!</title>



            <script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.js">
    </script>



    <script type="text/javascript">


            $('.test').click(function(){
                $('.test').removeClass("active");
                $(this).addClass("active");
            });


    </script>

    <style type="text/css">
        div.test{
            background: grey;
        }

        div.test:hover{
            background: yellow;
        }

        div.test.active{
            background: orange;
        }


    </style>

</head>


    <body>


            <div class="test">
                Stuff
            </div>
            <div class="test">
                Other stuff
            </div>
            <div class="test">
                More Stuff
            </div>


    </body>
</html>

有谁知道为什么这不起作用?完整示例的工作原理基本相同,但我使用一个 ID 来选择要取消突出显示的类,而不是 (.test) 所有类。但是该代码产生相同的结果。

更新:

尝试在 CSS 中进行此更改:

        div.test.active{
            background: orange;
        }

但是现在它根本没有突出显示。我错过了什么?

最佳答案

那是因为您将 CSS 中的属性设置为伪类,试试这个:

    div.test.active{
        background: orange;
    }

关于javascript - 无法让 jQuery addClass ("active") 工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21315213/

相关文章:

Javascript - 简化一堆长重复的隐藏/显示功能

javascript - 扰乱单选按钮数据

javascript - mouseover 和 mouseout 函数 DOM 元素高度碰撞

javascript - Jquery 停止第一个单击的按钮执行相同的代码

CSS:Firefox 中消失的边距

html - 垂直和水平居中 block ,动态宽度和高度

php - 如何让随机图像每次刷新一个样式表,但在选择另一个样式表时消失?

javascript - html 整洁和 javascript 正则表达式

javascript - 在 backstretch 上叠加内容

javascript - 使元素上的悬停效果仅持​​续有限的时间