CODEWITHSUNDEEP
javascriptjquery
Dan Clash
Dan Clash

Reputation: 11

$(this).addClass() not working

I can do $(this).children("a").addClass("class") and it works fine, but when I do $(this).addClass("class") it is not working. I am using $(this) within a mouseover function.

$("#site nav li.hasChild").mouseover(function ()
{
    $(this).children("a").addClass("selectedTab");  // works fine
    $(this).addClass("selectedFixTab"); // does not work
    $(this).children("ul").css("display", "block");
});

HTML:

<header id="site">
    <nav>
        <ul>
            <li id="Li1" class="hasChild">
                <a href="#">Fix</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                </ul>
            </li>
            <li id="Li2" class="hasChild">
                <a href="#">Learn</a>
                <ul>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                </ul>
            </li>
            <li id="Li3">
                <a href="contact.htm">Contact</a>
            </li>
        </ul>
    </nav>
</header>

CSS:

.selectedFixTab
{
    border-top:1px solid #eb7c00;
    border-left:1px solid #eb7c00;
    border-right:1px solid #eb7c00;
}

.selectedLearnTab
{
    border-top:1px solid #2d70a3;
    border-left:1px solid #2d70a3;
    border-right:1px solid #2d70a3;
}

.selectedTab
{
    border-bottom:1px solid #fff;
}

Upvotes: 0

Views: 16158

Answers (2)

mahulst
mahulst

Reputation: 443

$("#site nav li a").mouseover(function ()
{
    $(this).children("a").addClass("selectedTab");  // works fine
    $(this).addClass("selectedFixTab"); // does not work
    $(this).children("ul").css("display", "block");
});

I think this is what you want it to do!

Upvotes: 0

jfriend00
jfriend00

Reputation: 707238

It successfully adds the "selectedFixTab" class to the top level LI tags as soon as the mouse hovers over the LI tag. You can see it in action here in this jsFiddle: http://jsfiddle.net/jfriend00/mj2u6/.

I'm not sure it's doing exactly what you intend, but it is doing what the code says to do. If you care to explain what you're trying to accomplish, we can likely help you fix the code to do what you want.

Upvotes: 2

Related Questions