JQuery click function to change CSS

Question

We have to make a js click function with JQuery that will modify the css of an element.

$(document).ready(function(){
    document.getElementById('partaideak').click(function(){
    //$( "#partaideak" ).clic(function() {
        console.log("Partaideak");
        /* Stop form from submitting normally */
        //event.preventDefault();
        /* Clear result div*/
        $("#contentDiv").html('...');
        var formData = $(this).serializeArray();
        $.ajax({
            type: "GET",
            url: "/partaideak",
            dataType: "json",
            data: formData,
            success: function(data){
                console.log(data);
                //$( "#contentDiv" ).html(data);
            }
        });
	});
});

<ul class="menu">
  <li class="item"><a href="index.html">Hasiera</a></li>
  <li><a href="musika.html">Musika</a></li>
  <li><a href="bideoak.html">Bideoak</a></li>
  <li><a href="argazkiak.html">Argazkiak</a></li>
  <div id="partaideak"><li class="item-1"><a class="active"  href="partaideak.html">Partaideak</a></li></div>
											
  <li class="last"><a href="kontaktua.html">Kontaktua</a></li>
</ul>

We want to change the CSS by putting background images using jQuery click function when somebody clicks the partaideak (li).

Due to you not accepting Robin's answer, could you please expand what you want to do. Which element do you want to give a background image? — Daniel Apt
– Daniel Apt, Commented Nov 6, 2014 at 11:32

Yuyutsu · Accepted Answer · 2014-11-06 12:04:34Z

1

$("#partaideak").click(function() {
   $(this).css('background-url', 'url(images/image.jpg)');
});

OR

$("#partaideak").click(function() {
   $(this).attr("style","background-image:url(images/image.jpg) !important")
});

OR //js

$(document.ready(function() {
    $("#partaideak").click(function() {
      $(this).addClass('imageClass');
    }); 
});

//css file

.imageClass{
   background-image: url(images/image.jpg) !important;
}

answered Nov 6, 2014 at 12:04

Yuyutsu

2,52724 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robin · Accepted Answer · 2014-11-06 11:27:33Z

0

  $("#partaideak").css('background-image', 'url(images/image.jpg)');

answered Nov 6, 2014 at 11:27

Robin

4716 silver badges18 bronze badges

3 Comments

Katez Taldea Over a year ago

thanks robin we know that but : $(document).ready(function(){ document. ... url: "/partaideak", dataType: "json", //dataType: "html", data: formData, success: function(data){ console.log(data); $("#partaideak").css('background-image', 'url(images/image.jpg)'); ).html(data); } }); }); }); It doesnt work we dont know why

Daniel Apt Over a year ago

Could you please expand which part you are having trouble with?

Robin Over a year ago

in 'url('give path to your image')' and try without adding the .html(data)

Daniel Apt · Accepted Answer · 2014-11-06 11:30:06Z

0

You can change the CSS by using:

$("#partaideak").css("background-image", "url('http://lorempixel.com/400/200')");

Place that inside the click handler and you should be fine

answered Nov 6, 2014 at 11:30

Daniel Apt

2,7181 gold badge25 silver badges36 bronze badges

1 Comment

Katez Taldea Over a year ago

$(document).ready(function(){ document.getElementById('#partaideak').click(function(){ $.ajax({ type: "GET", url: "/partaideak", dataType: "json", success: function(data){ $("#partaideak").css('background-image', 'url(../images/unai.JPG)'); } }); }); }); call js doesnt work. When we click partaideak js doesnt work

Collectives™ on Stack Overflow

JQuery click function to change CSS

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related