CODEWITHSUNDEEP
jqueryhtmlcss
Katez Taldea
Katez Taldea

Reputation: 3

JQuery click function to change CSS

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).

Upvotes: 0

Views: 104

Answers (3)

Yuyutsu
Yuyutsu

Reputation: 2527

$("#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;
}

Upvotes: 1

Daniel Apt
Daniel Apt

Reputation: 2638

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

Upvotes: 0

Robin
Robin

Reputation: 471

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

Upvotes: 0

Related Questions