Question

当我点击我的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。

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

Answer 2

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

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

});
</script>

单击图像并删除活动类

2 个答案: