Question

我正在使用bootstrap中的tab功能进行一些实验。在我的代码中，我希望显示div中具有id内容1的内容，并且当单击第一个锚标记时，第二个div中的内容应该隐藏。同样适用于锚标签。

我想在不使用javascript的情况下实现相同的功能，只需使用bootstrap。

HTML MARKUP：

$GOPATH/src/github.com/golang/glog

上面的代码似乎不起作用。那么，我是否需要添加其他一些东西。我认为bootstrap提供的类只是用于样式。如果我猜想不必遵循bootstrap文档中提到的相同格式的ul和li。那么，数据切换，href和id是否足以完成这项工作？

Answer 1

我希望在不使用javascript的情况下实现相同的功能帮助引导。

为了澄清一下，Bootstrap的data-toggle=tab是他们的jQuery插件之一（参见http://getbootstrap.com/javascript/#tabs）。您需要包含关联的js文件（或bootstrap.js / bootstrap.min.js）及其依赖项（jQuery）

所以Bootstrap实际上是使用javascript。

我认为bootstrap提供的类只是用于样式化。

不完全是，这些类告诉bootstrap这些选项卡集合在一起。

如果我猜想不必遵循相同格式的ul和 li如bootstrap文档中所述。

正确，Bootstrap的插件代码与ul，li和a无关。你需要jus以下

使用data-toggle='tab'和href的元素告诉Bootstrap每个链接到哪个标签
对于选项卡，包含类tab-content的包装器（告诉Bootstrap一次只显示其中的一个选项卡）以及具有类选项卡且href中指示的id的子项。

如果将其中一个选项卡设置为活动状态，则默认显示该选项卡。否则，您需要单击链接以显示选项卡。

那么，数据切换，href和id是否足以完成这项工作？

data-toggle，href，id 以及制表符内容和标签类。。这是一组复制制表符行为的最小标记

<a href="#home" data-toggle="tab">Home</a>
<a href="#profile" data-toggle="tab">Profile</a>
<a href="#messages" data-toggle="tab">Messages</a>
<a href="#settings" data-toggle="tab">Settings</a>

<div class="tab-content">
    <div class="tab-pane active" id="home">a</div>
    <div class="tab-pane" id="profile">b</div>
    <div class="tab-pane" id="messages">c</div>
    <div class="tab-pane" id="settings">d</div>
</div>

你可以用其他东西替换a（虽然不是有效的HTML）和div。

如何使用bootstrap单击锚标记时加载div

1 个答案: