Grow your CSS skills. Land your dream job.

Changing CSS Styles That are Applied with .click() Function With Jquery

  • # May 9, 2013 at 6:37 pm

    I have a navigation bar that changes colors when a tab is selected. The color changing is done like this.
    CSS

    .nav_clicked {
    background-color:red;
    }

    Jquery

    $(“#nav_button_one”).click(function() {
    $(this).addClass(“.nav_clicked”);
    });

    I have another section where i change the colors of everything and it works perfectly, but not for the background-color of the clicked navigation buttons. I change the colors for the header and other elements like this

    Jquery

    $(“change_colors”).click(function() {
    $(“header”).css(“background-color”,”blue”);
    });

    The thing is that changing the .navclicked doesn’t change the color when the button is clicked, but it changes it overall and all of them without it being clicked. I want to change the orange color when the nav button is clicked but changing it like i did above only changes the color overall, and the nav buttons don’t even have that class.

    I want the background of the clicked nav bar to change from orange just like everything else. Any way i can do that? maybe by literally replacing the background-color of .navclicked with Jquery?
    http://reallycoolstuff.net/PROJECTS/Unica/#

    Sorry for the sloppiness but i can’t for the life of me get this code highlight thing to work.

    # May 9, 2013 at 10:41 pm

    It looks like you resolved this?

    # May 10, 2013 at 6:38 am

    @jasonw Not at all. Still looking for a solution.

    # May 10, 2013 at 7:18 am

    Your jquery code contains syntax error.



    $("change_colors").click(function() {
    $("header").css({"background-color":"blue"});
    });

    # May 10, 2013 at 10:10 am

    @Subash actually that code was correct, the code formatting was messed up.

    @Jarolin Use the “Code” link above the text area, all it does is adds a tab in front of your code

    And I think the problem is in this bit of code:

    $(“#nav_button_one”).click(function() {
    $(this).addClass(“.nav_clicked”);
    });

    The `addClass` doesn’t work when you include the period:

    $(“#nav_button_one”).click(function() {
    $(this).addClass(“nav_clicked”);
    });

    # May 10, 2013 at 3:49 pm

    @Mottie it actually doesn’t have the period. I just rewrote it and accidentally added the period. Still haven’t found a solution.

    # May 10, 2013 at 5:51 pm

    The link you shared looks like it’s working… the `nav-clicked` class is being applied to the `header_nav_link` when I click, and the color is changing to `#ff742c`. So what’s the problem?

    # May 10, 2013 at 5:56 pm

    you would have to click the first color pack and see that the orange header nav does not change colors. And when i add the code that changes the colors, it changes it overall and it doesn’t have to be clicked.

    # May 10, 2013 at 6:28 pm

    You can’t do it with jQuery’s `.css(..)` function because it applies inline styles, which always has higher specificity than any selector rule.

    I’d suggest either using jQuery to change some class on html or body like

    var html = $(“html”);
    var currentColor;
    $(“change_colors”).click(function() {
    if (currentColor)
    html.removeClass(currentColor);
    currentColor = “color_blue”;
    html.addClass(currentColor);
    });

    and then use css to override defaults like

    .nav_clicked {
    background-color: red;
    }
    .color_blue .nav_clicked {
    background-color: blue;
    }

    or use jQuery to load different stylesheets depending on color etc.

    # May 10, 2013 at 6:32 pm

    Well, when I click on the first color pack it does add a class:

    $(“.header_nav_link”).addClass(“nav_clicked_color_pack_one”);

    I don’t see `.nav_clicked_color_pack_one` defined in the css.

    If that isn’t what you needed, then please be more clear on what you are trying to do… the questions you are asking are way too general.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".