设置bootstrap按钮组选中状态

  使用bootstrap(V3.3.7)按钮组(btn-group)时,很多时候我们需要按钮组在显示的时候,预先设置一个按钮处于选中状态。
<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>


  仔细阅读bootstrap的文档,没有找到相关的说明。我自己动手试了一下,可以通过两种方法:为按钮添加active类(写在html代码里)、用js方法。两种方法的本质是一样的。后一种方法可以把按钮点击事件调用、按钮状态修改统一起来。

    	$("#orderBtnGroup .btn:first").click().addClass("active");


  但是有个问题,就是当点击按钮组其他按钮时,不能清除选中状态。目前没有找到好的办法。只好在按钮的点击事件中,去除一下所有按钮的active状态。
    	$("#orderBtnGroup").children().removeClass("active");


  这是一个没有办法的办法,因为不知道按钮组的按钮被点击时,发生了什么,我简单跟踪了一下bootstrap.js,没有理清楚。应该不是active类的增减。如果有人知道,请告诉我。谢谢。

猜你喜欢

转载自wallimn.iteye.com/blog/2368277