如何使用Bootstrap标签？ [英] How to use Bootstrap tabs?

问题描述

我想了解如何执行此操作： http://getbootstrap.com/javascript/#tabs p>

我认为文档不够详细，因为我不明白它是如何工作的。

 code>< div class =container> 
< ul class =nav nav-tabs> 
< li class =nav active>< a href =＃Adata-toggle =tab> A< / a>< / li& 
< li class =nav>< a href =＃Bdata-toggle =tab> B< / a>< / li> 
< li class =nav>< a href =＃Cdata-toggle =tab> C< / a>< / li> 
< / ul> 
 
<！ -  Tab窗格 - > 
< div class =tab-content> 
< div class =tab-pane fade in activeid =A>标签A内的内容< / div> 
< div class =tab-pane fadeid =B>标签B内的内容< / div> 
< div class =tab-pane fadeid =C>标签内的内容C< / div> 
< / div> 
< / div> 
  

这段代码给了我想要的东西

但是我无法在标签之间切换。

所以问题是：我应该添加什么JQuery或Javascript代码使它工作？示例中显示的内容不起作用：

解决方案

此代码适用于：

 < div class =container> 
< ul class =nav nav-tabs> 
< li class = nav active> < li class =nav> a href =＃Bdata-toggle =tab> B< / a>< / li> 
< li class =nav>< a href =＃C -toggle =tab> C< / a>< / li> 
< / ul> 
 
<！ -  Tab pane  - > 
 < div class =tab-content> 
< div class =tab-pane fade in activeid =A>标签A内的内容< / div> 
< div class =tab-pane fadeid =B>标签B内的内容< / div> 
< div class =tab-pane fadeid =C> ; / div> 
< / div> 
< / div> 
 
< script src =https://ajax.googleapis.com/ajax/libs/ jquery / 1.11.0 / jquery.min.js>< / script> 
 
<！ - 最新编译和缩小的CSS  - > 
< link rel =stylesheethref =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css\"> 
 
<！ - 可选主题 - > 
< link rel =stylesheethref =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css\"> 
 
<！ - 最新编译和缩小的JavaScript  - > 
< script src =// netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js\"> ;</script> 
  

I am trying to understand how to do this: http://getbootstrap.com/javascript/#tabs

I think the documentation is not detailed enough, because I can not understand how it works.

<div class="container">
    <ul class="nav nav-tabs">
        <li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
        <li class="nav"><a href="#B" data-toggle="tab">B</a></li>
        <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="A">Content inside tab A</div>
        <div class="tab-pane fade" id="B">Content inside tab B</div>
        <div class="tab-pane fade" id="C">Content inside tab C</div>
    </div>
</div>

This code gives me what I want

However I can't switch between tabs.

So the question is: what JQuery or Javascript code should I add to make it work? What is shown in the example does not work :(

解决方案

This code works:

<div class="container">
    <ul class="nav nav-tabs">
        <li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
        <li class="nav"><a href="#B" data-toggle="tab">B</a></li>
        <li class="nav"><a href="#C" data-toggle="tab">C</a></li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane fade in active" id="A">Content inside tab A</div>
        <div class="tab-pane fade" id="B">Content inside tab B</div>
        <div class="tab-pane fade" id="C">Content inside tab C</div>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

这篇关于如何使用Bootstrap标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！