BOOTSTRAP：btn按钮中的data-toggle属性失效问题

最新推荐文章于 2022-07-07 13:34:33 发布
于 2019-07-27 13:02:41 发布 3457 收藏
分类专栏： web 文章标签： data-toggle 失效 webstorm bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43957238/article/details/97505341
版权

BOOTSTRAP：btn按钮中的data-toggle属性失效问题

BOOTSTRAP：btn按钮中的data-toggle属性失效问题

bootstrap中用下拉选组件的时候遇到了点问题
在这里插入图片描述一开始这样写，发现失效，找了半天，实际上就是引入的js文件顺序问题。如果说有些组件不使用，其他一些bootstrap功能是可以正常使用的，但是F12会发现报错，后来将jquery库放在最前边就可以了
在这里插入图片描述
在这里插入图片描述
其实这个时候你F12已经没有报错了，看来不怪浏览器，不怪版本，还怪自己啊~~啊哈哈

这么厉害，要不要在村头摆两桌
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
bootstrap 模态框 data-toggle 不起作用
XcantloadX的博客
07-21 859
检查依赖引用顺序，应该是：jquery.js、bootstrap.css、bootstrap.js 如果是 Bootstrap5，请改用 data-bs-toggle！
data-toggle与data-target是什么作用
热门推荐
d295968572的博客
02-23 11万+
Bootstrap为这些a之类元素都绑定上了事件，而终止了链接默认行为。 data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target指事件的目标，一起使用就是代表data-target所指的元素以data-toggle指定的形式显示 data-target 与data-toggle 还有data-spy 文档总是给
Bootstrap5 导航栏讲解
qq_65552364的博客
06-04 3564
通过类 .navbar 可以创建一个标准的导航栏，若要创建响应式的导航栏，可以在类 .navbar 的基础上添加类 .navbar-expand-xxl|xl|lg|md|sm 来创建 (大屏幕水平铺开，小屏幕垂直堆叠)。 navbar-dark / light‎ 可以调节导航栏文本颜色，如深色背景导航栏对应浅色文本、浅色导航栏对应深色文本。‎ data-bs-toggle 指以什么类型事件触发 data-bs-target 指事件的目标 就是样式的具体细节具体的代码 dropdown-divider
Bootstrap 中data-[*] 属性的整理和总结
casion
03-07 2万+
【1 data-属性】 data属性是HTML5的新属性。允许开发者自由为其标签添加属性，存储数据，这种自定义属性一般用“data-”开头。 存储的（自定义）数据能够被页面的 JavaScript 所获取利用。 data-* 属性包括两部分： * 属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符。 * 属性值可以是任意字符串。 说直白点就是data属性......
解决dataTable 弹窗渲染表格时表头挤在一起，width被自动设置为100px的问题
sjn0815的博客
12-30 1526
在弹窗页面中添加以下命令： //解决表头width为100px的问题（editModal ：页面ID；monitorRecordTable：tableID） $('#editModal a[data-toggle="tab"]').on('shown.bs.tab', function (e) { if ($(e.target).text() == 'tab渲染表...
subMenu默认选中无效的解决方法
hoopp788的博客
06-03 214
因为这个subMenu是动态生成的, 他的name我设置为动态生成过程中的index, 所以第一个subMenu的name是0. 根据上述设定, 参考官网的说明,使用activeName="0"来表示激活的name, 还特别注意力name是string而不是int基本数据类型. 所以就通过这种方式让subMenu0呈现激活态. 很好, 并不work下面是高能的踩坑过程, 如果不想看可以直接跳转 "三. 解决方法"根据网上的资料, 我迅速的发现了解决问题的路径. "因为subMenu是动态展开的"--->所以
bootstrap5.x 基础二（组件）
jayLog的博客
01-27 1473
bootstrap组件内容的整理。组件是交互的，因此新手(比如我)看着文档也是有点不解。了解一番之后决定整理个笔记
angular获取路由参数_Angular 架构概览
weixin_39875503的博客
11-28 67
Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架，本身就是用 TypeScript 写成的。它将核心功能和可选功能作为一组 TypeScript 库进行实现，你可以把它们导入到你的应用中NgModuleAngular 的基本构造块是 NgModule，它为组件提供了编译的上下文环境，NgModule 会把相关的代码收集到一些功能集中。Angular 应用就是...
angular下拉框点击无反应,选择使用AngularJS点击按钮从下拉菜单的所有选项
weixin_42122986的博客
12-31 64
I want to select all values from a drop down of HTML on ng-click. Here is my HTML codeng-options="items.postalcode for items in toPostalCodes">So I want the implementation of selectall() function.T...
网页点击元素全屏事件
qq_38085855的博客
07-09 767
全屏事件 元素增加data-toggle='fullscreen'$(document).on('click', "[data-toggle='fullscreen']", function () {            var doc = document.documentElement;            if ($(document.body).hasClass("full-scree...
Bootstrap4 模态框mode 提示框data-toggle="tooltip" 弹出框 data-toggle="popover"
前端小99的博客
03-24 1万+
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息交互等。<div class="container">  <h2>模态框实例</h2>  <!-- 按钮：用于打开模态框 -->  <button type="button" class="btn
Bootstrap导航栏下拉菜单不生效的问题
qq_34639650的博客
07-04 2901
Bootstrap导航栏下拉菜单不生效的问题
bootstrap 后弹模态框前置 data-target不起作用
Java小白的博客
01-17 3306
bootstrap 后弹模态框前置 data-target不起作用
React——路由
最新发布
m0_51474171的博客
07-07 164
Web分类安装环境 Route组件介绍URL中传递参数 解析URL： 获取参数，类组件写法： Search Params传递参数 类组件写法： 函数组件写法： 重定向 使用Navigate组件可以重定向。 嵌套路由 注意：需要在父组件中添加组件，用来填充子组件的内容。 初始页面实现如下： 接下来，将Home Linux Django Web都做成一个组件目录 实现web页面 已经有了连接，接下来要通过每个url里面的id去渲染对应的页面，因为一个网页可能有上万个目录，不可能写这么多路由，所以一般
Bootstrap使用input文本框绑定data-toggle=“dropdown“ 无法输入空格问题
lou_xy的博客
02-22 950
Bootstrap使用input文本框绑定data-toggle="dropdown"
data-toggle与data-target的区别
weixin_44627672的博客
08-18 488
如下代码： <a href="login.html" data-toggle="modal" data-target="#signin-signup-tab" id="signin-button" class="pull-right">Sign In</a> 因为Bootstrap为这些元素都绑定上了事件，而终止了链接默认行为，你可以看看Bootstrap的文档，data-toggle指以什么事件触发，常用的如modal,popover,tooltips等，data-target
js动态生成html中的data-toggle="tooltip"无效
辰辰呐的博客
05-13 2227
类似于： let liElement = $(`<span data-toggle="tooltip" data-placement="top" data-html="true" data-original-title="<div>显示样式<br />高度：10cm<br />宽度：2cm</div>" class="exam-state icon-circle-empty">状态：完成</span>'`); 或者 let htm
bootstrap中button在data-toggle="##" data-target="xxx"没起作用的解决方法
baidu_36681154的博客
08-26 1万+
例如·今天我遇到bootstrap点击button没有弹出下面无序列表 代码如下： 首页 案例 资讯 关于 找不到错误，后来把放在 前面就解决。
bootstrap获取表格中选中行的值_bootstrapTable 数据表格 点击行选中行内容
weixin_39755003的博客
12-19 676
用post请求的时候必须加上contentType:"application/x-www-form-urlencoded; charset=UTF-8",var $table;//初始化bootstrap-table的内容function InitMainTable () {//记录页面bootstrap-table全局变量$table，方便应用var queryUrl = '/TestUser/...
Bootstrap中data-target 到底是什么
ywb201314的专栏
04-22 1万+
data-target 与data-toggle 还有data-spy 文档总是给人一种很突兀的方式给出来，然后又没有好好解释或者是我看的不够仔细？ html5允许开发者自由为其标签添加属性，这种自定义属性一般用“data-”开头。 我目前理解到在bootstrap中data-target，data-toggle等属性主要有两种作用： 【1.】在CSS中作标签选择器用。 如

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

这么厉害，要不要在村头摆两桌

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。

余额充值