CODEWITHSUNDEEP
jquery
Zac
Zac

Reputation: 12836

Switch background image with jQuery

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.

Upvotes: 2

Views: 3962

Answers (4)

Elzo Valugi
Elzo Valugi

Reputation: 27866

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)'});
});

Upvotes: 3

SLaks
SLaks

Reputation: 887453

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.

Upvotes: 1

Jaxwood
Jaxwood

Reputation: 81

You can do it like this:

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

Upvotes: 1

Tim Banks
Tim Banks

Reputation: 7179

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

Upvotes: 4

Related Questions