jQuery 更改背景/css 类 onclick 的图像点击和其他答案

【问题标题】：jQuery change background/css class onclick of image clicked and othersjQuery 更改背景/css 类 onclick 的图像点击和其他
【发布时间】：2012-02-03 07:06:47
【问题描述】：

我有一个关于 jQuery 的问题。我有多个图像，它们本质上是相同的。不同之处在于其中一个图像（我们称之为“活动”图像）用作侧面导航栏，触发右侧 Div 中多个 DIV 的“动画折叠”。对于这个被点击（并触发动画折叠）的项目，我想更改在 CSS 中定义的背景图像。

如果我可以在其中显示“活动”背景/类，而“非活动”图标在单击时恢复为“非活动状态”，我会很高兴。当您在导航栏中选择不同的项目时，每个项目都会将其背景/类更改为活动名称，同时触发动画折叠效果。

目前只有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>

【问题讨论】：

@maxedison 抱歉，没有指定。 CSS 类不会更改 onclick，而是保持为“a.toggle”并且不会更改为“a.toggle.active”，其他所有工作（动画折叠等）。谢谢。

标签： jquery html

【解决方案1】：

试试这个代码

$('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 中

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

【讨论】：

谢谢，试过了，还是没有效果。您可以在此处的实时环境中看到它：mlminsure.com/test/businesscontent.php。尚未添加任何内容。
那你还有其他问题。 Mehdi 的代码应该可以正常工作。