Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #44670
    Anonymous
    Inactive

    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.

    #134637
    jasonw
    Member

    It looks like you resolved this?

    #134662
    Anonymous
    Inactive

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

    #134663
    Subash
    Member

    Your jquery code contains syntax error.



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

    #134724
    Anonymous
    Inactive

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

    #134735
    Anonymous
    Inactive

    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.

    #134734
    CrocoDillon
    Participant

    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.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘CSS’ is closed to new topics and replies.