【问题标题】:twitter bootstrap tabs: links in content-panes not workingtwitter 引导选项卡:内容窗格中的链接不起作用
【发布时间】:2012-08-14 15:35:07
【问题描述】:

我在这里有一个工作选项卡实例并准备了一个 jsfiddle(选项卡在此处无法正常工作,但链接问题仍然存在): http://jsfiddle.net/Gyrga/6/

选项卡窗格中的链接不再起作用,并且根本无法访问 URL http://somewhere.com。为什么?我忽略了什么?

谢谢!

【问题讨论】:

  • 选项卡不起作用,因为您忘记关闭 JS }); 并且您通过管理资源和框架面板包含了两次引导 JS(第二次打破它)。
  • 好吧,我不是一个经验丰富的小提琴手.. ;) 错误出现在标记中,请参阅我接受的答案。

标签: tabs twitter-bootstrap


【解决方案1】:

当您使用标签页时,您需要执行以下操作(根据the doc

<a href="#home" data-toggle="tab">Home</a>
<!-- etc -->
<div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <!-- etc -->
</div>

但在您的示例中,您将data-toggle="tab" 放在.tab-pane 上,这会破坏内部的链接。

只需删除此属性并将其放在实际切换选项卡的链接上。这样你甚至不需要 JavaScript 来激活它们。

Working demo (jsfiddle)

【讨论】:

  • 哦,是的!这很容易..现在完美无缺。感谢您清除此错误! :)
  • 这个类也破坏了复选框和单选按钮。复选框不会显示为已选中,单选按钮也不会被选中。
  • @hanzolo 虽然没有自定义 JavaScript,但框架仍然使用 JavaScript 来捕捉事件并阻止点击的默认动作;例如检查复选框。
  • @Sherbrow - 我只是说它也破坏了复选框和无线电输入。当我发现这个非常有用的解决方案时,这就是我面临的问题
猜你喜欢
  • 2018-04-03
  • 2015-12-12
  • 2018-04-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多