网络编程

BootStrap 页签切换失效的解决方法
网络编程 2025/1/14 佚名
3 2

概述

bootstrap开发标签页时，标签页显示正常，但点击时候对应内容区域没有变化。

具体症状与解决方案

1.标签页UI出现，但点击无反应，标签页UI并未随点击进行切换

先检查bootstrap.css，jQuery.js和bootstrap.js是否有正确引入，并保证引入顺序jQuery在前，bootstrap.js在后。再检查代码中是否有其他报错中止了JS。

2.标签页可以随点击进行切换，但点击后前面几条内容可以切换，但后面几条内容切换失败

产生原因：

内容区域的html结构出现错误，在单个tab中多写了一个div的结束标签，使得tab-content这一div过早的关闭，剩下的tab-pan则与原来的tab-content变成了平级的关系而不是父子关系。仔细观察，点击之后原来应该出现在tab-content区域的内容会出现在页面的下方是主要的特征。

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>bootstrap页签切换失效</title>
 <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 <!-- 先引入jQuery，再引入bootstrap.js-->
 <script src="/UploadFiles/2021-04-02/jquery.min.js">


BootStrap 页签切换失效的解决方法


审查元素时看到tab-pan与tab-content在同级中出现是最明显的特征。这时候只需要查看最后一个能生效点击的页签中的代码(示例中为tab2)，将多余的div结束标签去掉即可。


总结


这种错误易除了刚接触bootstrap的开发者容易遇见之外，使用模板引擎配合bootstrap进行开发的过程中，页面结构嵌套关系比较复杂的时候也容易产生这类错误，但清楚错误产生原理还有分析方法之后，解决起来并不困难。
标签：
bootstrap,页签切换
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
白云城资源网 Copyright www.dyhadc.com

评论“BootStrap 页签切换失效的解决方法”

暂无“BootStrap 页签切换失效的解决方法”评论...
www.dyhadc.com 白云城资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/1/14

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
白云城资源网 Copyright www.dyhadc.com