- This topic is empty.
-
AuthorPosts
-
May 9, 2013 at 6:37 pm #44670AnonymousInactive
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 #134637jasonwMemberIt looks like you resolved this?
May 10, 2013 at 6:38 am #134662AnonymousInactive@jasonw Not at all. Still looking for a solution.
May 10, 2013 at 7:18 am #134663SubashMemberYour jquery code contains syntax error.
$("change_colors").click(function() {
$("header").css({"background-color":"blue"});
});
May 10, 2013 at 3:49 pm #134724AnonymousInactive@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:56 pm #134735AnonymousInactiveyou 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 #134734CrocoDillonParticipantYou 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.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.