<div class="text-right" style="margin-bottom:0.5em;">
排序：<span class="btn-group btn-group-sm" role="group" id="orderBtnGroup">
<button class="btn btn-default" onclick="showAccessList('createDate')">时间</button>
<button class="btn btn-default" onclick="showAccessList('readCount')">阅读</button>
<button class="btn btn-default" onclick="showAccessList('goodCount')">点赞</button>
</span>
</div>
Carefully read the bootstrap documentation and found no relevant instructions. I tried it myself, and there are two ways: add an active class to the button (written in the html code), and use the js method. The essence of both methods is the same. The latter method can unify the button click event call and the button state modification.
$("#orderBtnGroup .btn:first").click().addClass("active");
But there is a problem, that is, when other buttons in the button group are clicked, the selected state cannot be cleared. No good solution has been found so far. Only in the click event of the button, remove the active state of all buttons.
$("#orderBtnGroup").children().removeClass("active");
This is a no way, because I don't know what happened when the button of the button group is clicked. I simply traced bootstrap.js and didn't make it clear. It should not be an increase or decrease of the active class. If anyone knows, please let me know. thanks.