All Posts by Email, Once a Week

Media Temple logo

CSS-Tricks is brought to you in part by Media Temple, the web hosting that we both use and recommend.

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

  • Anonymous
    # 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?

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

    This reply has been reported for inappropriate content.

    @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”);
    });

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

    This reply has been reported for inappropriate content.

    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?

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

    This reply has been reported for inappropriate content.

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed