问题标签 [nav-pills]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
531 浏览

html - 如何使用引导程序创建交互式表单

我的小提琴在这里:http: //jsfiddle.net/L4hkrwa6/14/

HTML 代码在这里:

当我单击 Show1 时(以及最初加载页面时),我只想看到输入“OnlyMe”。

当我点击 Show2 时,我只想看到输入“MeAnd23Submit”、“23”和提交按钮。

当我点击 Show3 时,我只想看到输入“MeAnd23Submit2”、“23”和提交按钮。

我尝试了几种组合,但似乎没有任何效果,我将不胜感激......

提前致谢!

更新:这只是一个小例子,其中包含理解问题的必要项目。在“真实案例”中,我有更多输入字段,我不想在多个选项卡窗格中复制这些字段。

0 投票
1 回答
293 浏览

css - Bootstrap 动态药丸只能使用一次?

我正在创建一个登录/注册表单。如果显示登录表单,则下方有一个按钮Sign up,如果单击它,则登录表单消失并且注册表单消失。然后,一旦显示注册表单,单击Sign in将显示登录表单。

但是,它只能工作一次。我的客户向我发送了他们购买的网站模板并希望我进行修改。有数千行长的自定义 CSS 文件,它带有自己的 Bootstrap 版本(CSS 和 JavaScript),我不确定他们如何修改它。我希望问题是我而不是模板,因为那将是一场噩梦。

这是我的登录表单/动态药丸:

然后是我自己从 Sass 编译的样式类:

任何帮助将非常感激。如果需要更多详细信息,请告诉我。谢谢。

0 投票
2 回答
51 浏览

html - 如何将药丸箭头定位在长文本的右中心?

我有一个带有长文本的标题,我似乎无法想出正确的 css 来制作带有所有文本的右侧中心的药丸。我需要两条或更多条线,并且药丸需要位于正确区域的中心。谁能告诉我这是怎么做到的?任何帮助表示赞赏。

0 投票
2 回答
923 浏览

php - 带有 php codeigniter 的 Bootstrap 4 动态导航药丸不起作用

当我点击不同的产品类别时,我无法获得对应的产品项目,而只显示活动类别的项目。当我单击另一个导航项时,以前显示的项目保持不变,即无法在选项卡窗格中更改类“显示活动”

代码:

我无法诊断此代码中的问题,请帮助我解决此问题

0 投票
1 回答
230 浏览

css - 引导程序中的选项卡窗格现在显示

编辑:忘了提,它应该在反应应用程序中

我正在尝试使用Bootstrap垂直药丸,但我tab-panel消失了,并且在单击 other 时nav-linkactive也没有更改为该链接。

这是代码:

请帮忙!

这是当前状态: 当前

这就是这段代码的所在,是的,我知道版本并且包含了所有内容。

https://getbootstrap.com/docs/4.0/components/navs/

谢谢!

0 投票
1 回答
324 浏览

javascript - 引导药丸 - 如何在不滚动的情况下显示药丸标签

我有一个bootstrap 3 药片显示器。

它由三个不同长度(高度)的标签组成。

我插入了一些代码,允许单击链接并激活和显示特定的药丸。

激活不同药丸的链接位于药丸/标签的底部。

当我单击链接并激活药丸时,会显示其相关选项卡,这就是我想要实现的。

但是,屏幕会自动导航到药丸/标签的顶部。

有没有办法在单击链接时阻止屏幕导航到药丸/选项卡的顶部(药丸被激活)?

这是我拥有的代码,它允许从页面上的链接激活和显示药丸/标签:

0 投票
2 回答
66 浏览

javascript - 继续和上一个按钮不导航 Javascript 引导程序

下面是我一直在努力工作的一段代码。继续和上一个按钮不起作用,javascript 没有显示下一个和上一个选项卡。

Javascript:

html:

完整代码来自:https ://www.codeply.com/go/RMKW5H5u2e

0 投票
2 回答
1285 浏览

html - 带有子药丸的 Bootstrap 4 药丸

目标是用 bootstrap 4 药丸或 navs 制成药丸。所以它具有树结构,就像每个类别都有子类别并且它们是动态的。

你可以在这里看到结构 在此处输入图像描述

应该看起来像 在此处输入图像描述

这是我到目前为止所尝试的:

0 投票
2 回答
200 浏览

html - 应用程序流程的自定义 Bootstrap 4 导航栏

我正在nav-bar为我的应用程序进行自定义进度,如下所示:

在此处输入图像描述

我在这个网站上找到了这个。

使用下面的 HTML 和 CSS,它似乎不适用于 Bootstrap 4,我无法让它工作。

HTML

CSS

我的最终看起来像:

在此处输入图像描述

0 投票
2 回答
909 浏览

bootstrap-4 - 如何让 Bootstrap Nav-Pills 选项卡链接和页面链接同时工作

我正在使用 Bootstrap Nav-Pills,在其中我需要使用指向同一页面上不同选项卡/药丸的链接,并指向同一站点上的不同页面(有些带有锚标签)。

最初,指向其他页面的链接工作正常,但我需要添加 JS(我不知道——谢谢 Stack Overflow 的代码)以获取其他选项卡/药丸的链接。现在添加了 JS(这对于使选项卡/药丸链接有效),到其他页面的链接不再有效。

示例:在下面的“一般信息”部分中,“类别”选项卡/药丸链接 (#tab-4) 需要代码底部的 JS 才能工作,但相同的代码禁用了“给我们的办公室发送电子邮件”(联系.htm#email) 链接。

我仍在寻找解决方案——我承认我是 JS 新手。在我继续搜索的同时,如果有任何 JS 专业人士如何更新现有的 JS,以便我可以链接到选项卡/药丸和其他页面,我们将不胜感激!