jquery - 如何在jquery中设置类="active"

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>

输出:点击时出错:

<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 are(银行和按钮)添加2个类(active1，active2)的类

Answer 1

据我了解，您需要能够在每个部分中选择单个选项。仅使用一个 active 类并更改 css 中的样式:

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/