单击图像并删除活动类答案

【问题标题】：click the image and remove the active class单击图像并删除活动类
【发布时间】：2011-09-30 07:42:56
【问题描述】：

当我点击我的 img 然后激活蓝色 btn 类时，有没有办法可以删除红色 btn 上的活动类？

HTML

<div id="nav">
<ul>
<li class="red btn"><a class="tildig" href="#din_app" data-transition="fade" >
  <p>TIL DIG</p>
  </a></li>
<li class="blue btn"><a class="kontakt" href="#kontakt" data-transition="fade" >
  <p>KONTAKT</p>
  </a></li>
</ul>
</div>

<div data-role="page" id="interesseret">
<div data-role="header" data-nobackbtn="true"> </div>
<div data-role="content">
<p class="brod">  
<a href="#kontakt" data-transition="fade"><img class="kontakt_link_480" src="image/link_img.png" width="480" height="100" alt="Tryk p&aring; kontakt og book et m&oslash;de" ></a></p>
</div>
<div data-role="footer"> </div>
</div>

脚本

<script type="application/x-javascript">
$(function() {
      $('li.btn').click(function(){
          // Add "active" to the clicked element and
          // get all siblings and remove "active" from them
          $(this).addClass('active').siblings().removeClass('active');
      });

    });

CSS

.red.btn { float:left; margin: 0 0 0 5px ; width: 40%; height:30px; background-image:url(../image/rod_bnt.png);}
.red.btn.active { background-image:url(../image/red.jpg); height: 40px; background-position:center;}

.blue.btn {float:right; margin:0 5px 0 0; height:30px; width: 40%; background-image:url(../image/blaa_bnt.png); }
.blue.btn.active { background-image:url(../image/blue.jpg); height: 40px; background-position:center;}

我试过了，但它不起作用

 <script type="application/x-javascript">
 $(function() {
      $('a.img').click(function(){
          // Add "active" to the clicked element and
          // get all siblings and remove "active" from them
          $(this).addClass('blue.btn.active').siblings().removeClass('red.btn.active');
      });

    });

 </script>

// 在此先感谢 Kasper。

【问题讨论】：

标签： jquery class image add

【解决方案1】：

你可以这样做：

 $('a img').click(function(){
      // Add "active" to the blu li element and
      $('li.blue').addClass('active');
      //  remove "active" from the red element
      $('li.red').removeClass('active');
  });

【讨论】：

好像什么都没有发生
我认为是因为不清楚你想做什么（我完全按照你写的去做，但我认为它不会成功）。在您的 html 中没有“活动”类，您到底想做什么？尝试在 jsfiddle.net 上发布示例
我有两个菜单项，当你按下它时会获得活动类。（红色和蓝色）我想要的是，当你点击图像时，红色 btn 活动类被删除，蓝色 btn类变得活跃
这很奇怪.. 当我单击 img 时，红色类仍然处于活动状态。完全没有回应:(
在 jsfiddle.net 上发布一个示例，我认为它更容易提供帮助！ :)

【解决方案2】：

如果您只想将活动添加到蓝色并从红色中移除：

<script type="application/x-javascript">
$(function() {
  $('a.img').click(function(){
    $('.blue.btn').addClass('active');
    $('.red.btn').removeClass('active');
  });

});
</script>

【讨论】：

不应该分配给列表吗？