如何在 jquery 中设置 class="active"

How to set class="active" in jquery

提问by Hai Truong IT

I have a sample code:

我有一个示例代码：

<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>

And jquery:

和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: Error when click on:

输出：单击时出错：

<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>

How to using jquery exactly for add class for 2 id are (banks and buttons) with 2 class are (active1, active2)

如何准确地使用 jquery 为 2 id 的添加类是（银行和按钮）与 2 类是（active1，active2）

回答by Samich

AS I understand you need to be able to choise single option in each section. Use only one activeclass and change styles in css:

据我所知，您需要能够在每个部分中选择一个选项。只使用一个active类并在 css 中更改样式：

html:

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:

js：

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

css:

css：

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

Code: http://jsfiddle.net/jn3v4/2/

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

回答by praveenkumar

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

回答by Rafay

when removing the class you are looking only inside the #boxchange it to .boxlike

删除课程时，您只查看内部，#box将其更改为.box喜欢

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

DEMO

演示

回答by Fiestas Sanchez Ivan

Jquery function:

jQuery 函数：

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