Switch background image with jQuery

Question

I have found similar questions and answers but afraid I am still a bit lost. I just want a set of links that will addClass to the body to change the background image. I only understand how to use the addClass property on the actual element being clicked, but I am not sure how to get that to add a class to another div. Thanks for any pointers.

Answer 1

Inside the click event of the element, you can use any selector to manipulate the DOM. In this case, I am attaching a click event to all the anchors on the page. When any anchor is clicked, I am adding a class to the body element of the page. The return false makes sure that the browser does not follow the href of the anchor.

$("a").click(function(){
    $("body").addClass("CLASS TO ADD");
    return false;
});

Answer 2

You can do it like this:

$("div").addClass("yourclassname");

Answer 3

Using addClass()

$("#your_linkID").click(function(){
    $("#other_div").addClass("CLASS TO ADD");
});

or using css() function

$("#selector_link").click( function(){
    $("#target_div").css({ 'background-image': 'url(/url-to-image.jpg)'});
});

Answer 4

You can call the addClass method on any jQuery object.

Therefore, you can use the $ method to create a new jQuery object inside your event handler, like this:

$("a.bd1").click(function(e) {
    $("body").addClass("class1");
    return false;
});

For more information about how to select various elements using jQuery, read the documentation.

Note that addClass takes a class name, not a CSS selector, so you should add a . to its parameter.

Answer 5

Just wanted to add that I also had to add a $("body").removeClass(); to make this work right