Can't get jQuery addClass("active") to work

StackOverflow https://stackoverflow.com/questions/21315213

سؤال

This is a bit of a simplification of my code, but I think the example works. Basically, what I want to do is to use jQuery to automatically highlight a selected div-element.

At the moment, the div-element only seems "active" once I hold down on the element (the background becomes orange). 

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

Does anyone know why this doesn't work? The complete example works basically the same, but I an ID to select the class to be un-highlighted rather than (.test) all classes. But that code produces the same result.

UPDATE:

Tried making this change in CSS:

        div.test.active{
            background: orange;
        }

Now it doesn't highligt at all however. Did I miss something?

هل كانت مفيدة؟

المحلول

Thats because you are setting the property in your CSS as a pseudo-class, Try this:

    div.test.active{
        background: orange;
    }

نصائح أخرى

You're mixing classes and state selectors. :active is a state (that means you're currently mouse-down on it) while .active is any random class (it could be .xyz). Here's more information on states: http://css-tricks.com/almanac/selectors/a/active/

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top