我有一个示例代码:
<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>
输出: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>
如何使用jquery添加类2 id是(银行和按钮)与2类是(active1, active2)
据我所知,您需要能够在每个部分中选择单个选项。只使用一个active
类并更改css中的样式:
<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/
$(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>
当删除类时,您只在#box
内部查看,将其更改为.box
,如
$('.box li').click(function(){
$('.box li').removeClass('active1');
$('.box li').removeClass('active2');
$(this).addClass('active1');
$(this).addClass('active2');
});
Jquery函数:
(".box li").click(function() {
$(".box li").removeClass('active');
$(this).addClass('active');
});