Question

我有一个关于jQuery的问题。我有多个图像，实质上是相同的。区别在于其中一个图像（让我们称之为“活动”图像）用作侧面导航栏，触发右侧Div中多个DIV的“动画崩溃”。对于这个被点击的项目（并触发动画崩溃），我想要更改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>

Answer 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');
    });
});

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

1 个答案: