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类点击图像点击和其他

回答

相关问题