`

设置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类的增减。如果有人知道,请告诉我。谢谢。
分享到:
评论

相关推荐

    BootStrap Select清除选中的状态恢复默认状态

    总之,清除Bootstrap Select的选中状态并恢复默认状态,关键在于正确地改变select元素的状态并调用`selectpicker('refresh')` 方法来同步组件的视图。同时,为了代码的可读性和可维护性,推荐将重置逻辑封装在单独的...

    bootstrap炫酷的按钮集合~满足各种需求

    按钮的状态变化也是Bootstrap按钮的一个关键特性。它支持三种状态:默认、hover和active,以及禁用状态。这使得按钮在用户交互时可以呈现出更丰富的反馈,提高用户体验。例如,当用户鼠标悬停在按钮上时,按钮会改变...

    bootstrap TreeView全选单选,定位选触发事件实例

    这通常涉及到JavaScript或者jQuery的事件监听和处理,例如`click`事件,配合`toggleClass()`或`prop()`方法来切换选中状态。 2. **父节点控制子节点**: 在树形结构中,父节点的选择状态通常会影响到其所有子节点...

    Bootstrap单选按钮和复选框美化特效.zip

    例如,当复选框被选中时,添加一个表示选中状态的图标类,反之则移除。 在"3098"这个文件中,可能包含了实现这一特性的HTML、CSS和JavaScript代码示例。通过查看和学习这些代码,开发者可以了解到如何结合Bootstrap...

    Bootstrap Table 跨页选择

    当全选按钮被点击时,需要遍历所有页面的所有行,设置其为选中状态;反之,取消所有选中状态。 5. **获取选中数据**:用户可能需要获取所有选中行的数据,为此,可以使用Bootstrap Table 提供的 `getSelections` ...

    Bootstrap 第17章 按钮和折叠插件

    ### 一、Bootstrap按钮 Bootstrap的按钮设计优雅,提供多种预定义的样式,包括`primary`、`secondary`、`success`、`danger`、`warning`、`info`和`light`等。这些样式不仅改变了颜色,还调整了边框和文字颜色,...

    Bootstrap 第7章 图标菜单和按钮组件

    Bootstrap按钮提供了多种样式和大小,包括默认、主要、次级、警告和危险等预定义的颜色方案。按钮可以通过添加`.btn`类和相应的颜色类(如`.btn-primary`)来创建。此外,还可以通过`.btn-lg`, `.btn-sm`或`.btn-xs`...

    Angularjs bootstrap table多选,支持单击行选中

    为了让用户能够看到选中状态,我们需要在`&lt;tr&gt;`中应用一些CSS类。在`style.css`中,可以定义`selected`类以突出显示选中的行: ```css tr.selected { background-color: #b3d4fc; /* 自定义选中颜色 */ } ``` 在`...

    BootStrapTable 单选及取值的实现方法

    这样,当用户点击表格中的行时,只有当前行会被选中,其他行的选中状态将被取消。在初始化 BootstrapTable 的 JavaScript 代码中,添加以下配置: ```javascript $('#your_table_id').bootstrapTable({ ...

    bootstrap table组件API

    9. **API方法**:包括`refresh`(刷新数据)、`toggleColumn`(显示/隐藏列)、`showColumn`/`hideColumn`(控制列的显示状态)、`getSelections`(获取选中行的数据)等,方便对表格进行动态操作。 10. **事件**:...

    bootstrap-multiselect下拉框多选单选条件筛选

    Bootstrap Multiselect提供了许多可配置的选项,例如`includeSelectAllOption`(是否包含全选选项),`selectAllText`(全选按钮的文字),`nonSelectedText`(未选中任何选项时的提示文字)等。你可以根据需求调整这些...

    bootstrap按钮插件(Button)使用方法解析

    Bootstrap按钮插件不仅提供了一种简单的方法来改变按钮的外观,还支持动态交互,如加载状态、模拟单选按钮和复选框。 首先,我们来看按钮加载状态的实现。当需要在用户点击按钮后显示加载指示器时,我们可以使用`...

    基于bootstrap-table的穿梭框

    Bootstrap Table提供了丰富的API和事件,如`toggleAllSelection()`用于切换所有项的选中状态,`search(text)`进行表格搜索,`sort(name, order)`执行排序等。 8. **事件响应**:通过监听`onTransfer`事件,可以捕获...

    bootstrap 多选框

    6. **事件和方法**:插件提供了丰富的JavaScript事件和方法,如`select.bs.select`(选择项触发)、`deselect.bs.select`(取消选择项触发)以及`refresh`(更新选项)等,方便开发者进行交互控制和状态管理。...

    bootstrap树形下拉框 下拉框树形菜单(修改版)

    调用`treeview.init()`方法并传入配置对象,设置数据源、选中项、展开状态等参数。 5. **事件监听**:为了响应用户的交互,如点击节点或选择项,需要监听相关的事件,如`nodeSelected`、`nodeUnselected`等。通过...

    下拉多选框bootstrap-multiselect教程

    Bootstrap Multiselect 支持通过 CSS 选择器进行样式定制,例如改变选中项的颜色或调整按钮样式。同时,插件内置了多语言支持,可以通过 `language` 选项设置: ```javascript $('#example').multiselect({ ...

    Bootstrap每天必学之按钮(Button)插件

    总结来说,Bootstrap的Button插件极大地丰富了按钮的交互功能,包括加载状态、单个切换、单选按钮组和复选按钮组等。这些功能使得开发者能够更方便地创建响应式的、用户体验良好的网页应用。在实际开发中,结合...

    基于bootstrap+jQuery的前端分页

    6. **分页逻辑**:在实现分页时,还需要考虑如何计算总页数、当前页、上一页和下一页等状态,以及处理边界情况,如用户尝试访问不存在的页码。 7. **API接口设计**:后端需要提供一个接口,接收前端传递的页码和每...

    BootstrapTreeView树形结构

    1. 可定制性:BootstrapTreeView 允许开发者通过设置不同的参数来自定义节点的样式、行为和交互方式。 2. 响应式设计:遵循 Bootstrap 的设计理念,该插件支持不同设备和屏幕尺寸的自动适应。 3. 交互性:用户可以...

Global site tag (gtag.js) - Google Analytics