我有两个按钮,当我单击其中一个按钮时,该函数会添加“已选择”类,但是如果我按下另一个按钮,则这两个按钮会保持相同的类,我使用了兄弟姐妹选择器,但无法正常工作,¿请问我
$('.btn-switch-view').on('click', function() {
$(this).addClass('btn-switch-view-selected');
$('.btn-group').siblings('a.btn-switch-view-selected').removeClass('btn-switch-view-selected');
});
.btn-group .btn-default.btn-switch-view {
color: #b2b2b2;
}
.btn-group a.btn-default.btn-switch-view:hover,
a.btn-default.btn-switch-view-selected {
color: #1b4298!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a href="#" id="grid" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-large" aria-hidden="true"></i>
</a>
<a href="#" id="list" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-list" aria-hidden="true"></i>
</a>
</div>
您已经有锚this
,现在定位到同级锚,并删除该类
$('.btn-switch-view').on('click', function() {
$(this).addClass('btn-switch-view-selected')
.siblings()
.removeClass('btn-switch-view-selected');
});
.btn-group .btn-default.btn-switch-view {
color: #b2b2b2;
}
.btn-group a.btn-default.btn-switch-view:hover,
a.btn-default.btn-switch-view-selected {
color: #1b4298!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-group">
<a href="#" id="grid" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-large" aria-hidden="true">Button</i>
</a>
<a href="#" id="list" class="btn btn-default btn-sm btn-switch-view">
<i class="fa fa-th-list" aria-hidden="true">Button</i>
</a>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句