jQuery改變背景/ css類點擊圖像點擊和其他

我有一個關於jQuery的問題。我有多個實質上相同的圖像。不同的是，其中一個圖像（我們稱之爲「活動」圖像）被用作側面導航欄，其觸發Div中的多個DIV在右側的「動畫崩潰」。對於這個項目被點擊（並觸發動畫崩潰），我想要改變CSS中定義的背景圖像。jQuery改變背景/ css類點擊圖像點擊和其他

我很喜歡它，如果我可以讓「活動」背景/課程顯示在一個上，而「非活動」圖標恢復到「非活動狀態」onclick。當您在導航欄中選擇不同的項目時，每個項目都會將其背景/類別更改爲活動指定，同時觸發動畫合攏效果。

眼下只有animatedcollapse事件的作品，但非活動狀態

下面是我的工作的HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript" src="animatedcollapse.js"></script> 
<script type="text/javascript"> 
animatedcollapse.addDiv('one', 'fade=1,speed=400,group=content,hide=0') 
animatedcollapse.addDiv('two', 'fade=1,speed=400,group=content,hide=1') 
animatedcollapse.addDiv('three', 'fade=1,speed=400,group=content,hide=1') 
animatedcollapse.init() 
</script> 
<script type="text/javascript"> 
$('a.toggle').click(function() { 
    $('a.toggle.select').removeClass('active'); 
    $(this).addClass('active'); 
}); 
</script> 
<style type="text/css"> 
a.toggle { 
    background-image: url(images/contentnav_inactive.png); 
    width: 275px; 
    height: 41px; 
    background-position: left top; 
    background-repeat: no-repeat; 
    float: left; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 
a.toggle.active { 
    background-image: url(images/contentnav_active.png); 
    width: 275px; 
    height: 41px; 
    background-position: left top; 
    background-repeat: no-repeat; 
    float: left; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 
a.contentheader { 
    height: 25px; 
} 
</style> 
</head> 
<body> 
<div class="content"> 
     <div class="contentnav"> 
     <a class="contentheader" href="javascript:animatedcollapse.toggle('one')" id="toggle1_TGLink"><img src="images/contnav_header_business.png" width="252" height="25" style="margin: 2px 4px" /></a> 
     <a class="toggle" id="toggle2_TGLink" href="javascript:animatedcollapse.toggle('two')"><img src="images/contentnav_text_busauto.png" width="269" height="41" /></a> 
     <a class="toggle" href="javascript:animatedcollapse.toggle('three')" id="toggle3_TGLink" ><img src="images/contentnav_text_bop.png" width="269" height="41" /></a> 
</div> 
     <div class="toggle></div> 
     <div class="contenttext"> 
      <div id="one" class="TG_hidden"><h1>Business Insurance Overview</h1> 
       <hr /> 
     </div> 
      <div id="two" class="TG_hidden"><h1>Business Auto</h1> 
       <hr /> 

      </div> 
      <div id="three" class="TG_hidden"><h1>Business Owners Insurance (BOP)</h1> 
      <hr /> 

     </div> 
     </div> 
</body> 
</html>

來源

2012-02-02 Mike Scott

什麼是不工作？ – maxedison 2012-02-02 19:00:18

@maxedison抱歉，未指定。 CSS類不會改變onclick，它只是保持「a.toggle」，不會改變爲「a.toggle.active」，其他所有工作（動畫崩潰等）。謝謝。 – 2012-02-02 19:02:15

試試這個代碼

$('a.toggle').click(function() { 
    $('a.toggle').removeClass('active'); 
    $(this).addClass('active'); 
});

我已經剛刪除.select類

「animatedcollapse.js」線107，你應該刪除「@」所以這條線應該已經

var $allcontrols = $('[rel^="collapse-"], [rel^="expand-"], [rel^="toggle-"]')

也應包裝在$(document).ready您選擇的

來源

2012-02-02 20:02:45

謝謝，試過了，它仍然沒有造成任何影響。你可以在這裏的實時環境中看到它：http://mlminsure.com/test/businesscontent.php。尚未添加內容。 – 2012-02-02 20:29:42

然後你有其他問題。 Mehdi的代碼應該可以正常工作。 – maxedison 2012-02-02 21:05:53

我在編輯中添加了一些其他更改。 – 2012-02-02 23:08:48

jQuery改變背景/ css類點擊圖像點擊和其他

回答

相關問題