2014-11-06 117 views
0

我們必須用jQuery做一個js的點擊功能,它會修改一個元素的css。JQuery點擊功能來改變CSS

$(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); 
 
      } 
 
     }); 
 
\t }); 
 
});
<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> 
 
\t \t \t \t \t \t \t \t \t \t \t 
 
    <li class="last"><a href="kontaktua.html">Kontaktua</a></li> 
 
</ul>

我們希望通過把使用jQuery單擊功能背景圖片更改CSS當有人點擊partaideakli)。

+0

由於你不接受[羅賓](http://stackoverflow.com/users/2042366/robin)」你可以請你擴展你想做的事情。你想給背景圖像哪個元素? – 2014-11-06 11:32:18

回答

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

感謝羅賓我們知道,但: $(文件)。就緒(函數(){ \t文件... \t \t \t \t網址:。 「/ partaideak」, \t \t \t \t數據類型: 「JSON」 , \t \t \t \t //數據類型: 「HTML」, \t \t \t \t數據:FORMDATA, \t \t \t \t成功:function(data){ \t \t \t \t \t console.log(data); (「#partaideak」)。css('background-image','url(images/image.jpg)'); )。html的(數據); \t \t \t \t} \t \t \t}); \t}); }); 它不工作我們不知道爲什麼 – 2014-11-06 11:29:08

+0

您能否擴展您遇到麻煩的部分? – 2014-11-06 11:30:49

+0

in'url('give path to your image')'並嘗試不添加.html(data) – Robin 2014-11-06 11:41:43

0

您可以通過更改CSS:

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

廣場的click處理程序中,你應該罰款

+0

$(document).ready(function(){ \t document.getElementById('#partaideak')。click函數(){ \t \t $。AJAX({ \t \t \t \t \t \t \t \t類型: 「GET」, \t \t \t \t URL: 「/ partaideak」, \t \t \t \t數據類型: 「JSON」, \t \t \t \t \t \t \t \t成功:功能(數據){ \t \t \t \t \t \t \t \t \t \t $( 「#partaideak」)的CSS( '背景圖像', 'URL(../圖像/ unai.JPG)')。 \t \t \t \t} \t \t \t}); \t}); }); 打電話js不工作。當我們點擊partaideak js不起作用 – 2014-11-06 11:42:19

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文件

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