如何在jQuery的

Question

設置類= 「活動」 我有一個示例代碼：

<div class="box"> 
     <div id="banks"> 
      <ul> 
       <li class="active1">Bank1</li> 
       <li">Bank2</li> 
      </ul> 
     </div> 
     <div id="buttons"> 
      <ul> 
       <li class="active2">USD</li> 
       <li>EURO</li> 
      </ul>   
     </div> 
</div> 

和jQuery：

<script> 
$(document).ready(function(){ 
    $('.box li').click(function(){ 
     $('#banks li').removeClass('active1'); 
     $('#buttons li').removeClass('active2'); 
     $(this).addClass('active1'); 
     $(this).addClass('active2'); 
    });  
}); 
</script> 

OUPUT：錯誤當點擊：

<div class="box"> 
     <div id="banks"> 
      <ul> 
       <li class="active2 active1">Bank1</li> 
       <li class="active2">Bank2</li> 
      </ul> 
     </div> 
     <div id="buttons"> 
      <ul> 
       <li class="">USD</li> 
       <li class="">EURO</li> 
      </ul>   
     </div> 
</div> 

如何正確使用jQuery的添加類爲2 id是（銀行和按鈕）與2類是（active1，active2）

Answer 1

據我所知，你需要能夠在每個部分選擇單一選項。使用CSS中只有一個active類和改變風格：

HTML：

<div class="box"> 
     <div id="banks"> 
      <ul> 
       <li class="active">Bank1</li> 
       <li>Bank2</li> 
      </ul> 
     </div> 
     <div id="buttons"> 
      <ul> 
       <li class="active">USD</li> 
       <li>EURO</li> 
      </ul>   
     </div> 
</div> 

JS：

$(document).ready(function(){ 
    $('.box li').click(function() { 
     $(this).siblings('li').removeClass('active'); 
     $(this).addClass('active'); 
    }); 
}); 

CSS：

.box li { cursor:pointer; } 
#banks .active { color:red; } 
#buttons .active { color:blue; } 

代碼：http://jsfiddle.net/jn3v4/2/

Answer 2

刪除您在#box改變它裏面只希望.box像

$('.box li').click(function(){ 
    $('.box li').removeClass('active1'); 
    $('.box li').removeClass('active2'); 
    $(this).addClass('active1'); 
    $(this).addClass('active2'); 
}); 

DEMO

Answer 3

jQuery函數的類時：

(".box li").click(function() { 
    $(".box li").removeClass('active'); 
    $(this).addClass('active'); 
}); 

Answer 4

$(document).ready(function(){ 
 
$(".active-class a").click(function() { 
 
    $(".active-class a").removeClass("active"); 
 
    $(this).addClass("active"); 
 
}); 
 
});

a.active 
 
{ 
 
background:#000000; 
 
color:#ffffff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div > 
 
      <ul> 
 
       <li class="active-class"><a href="#" class="active">home</a></li> 
 
       <li class="active-class"><a href="#">about</a></li> 
 
       <li class="active-class"><a href="#">gallery</a></li> 
 
       <li class="active-class"><a href="#">contact us</a></li> 
 
      </ul> 
 
     </div>