Question

我正在尝试使用Twitter Bootstrap Togglable标签并让它显示不同的div节点时遇到问题。一切都正确布局（所以我知道CSS正确连接）我引用了JavaScript并确保我需要的功能在那里，但由于某些原因，当我点击标签时它不会显示其他div（基于点击导航栏中的链接。）

这是我正在尝试使用的标记

<script>
$(function () {
$('.tabs a:last').tab('show')
})
</script>

<ul class="nav nav-tabs">
        <li class="active"><a href="#home" data-toggle="tab">home</a></li>
        <li><a href="#about" data-toggle="tab">about tom</a></li>
        <li><a href="#services" data-toggle="tab">services</a></li>
        <li><a href="#new_patient" data-toggle="tab">new patients</a></li>
      </ul>

      <div class="tab-content" id="tab-content">
        <div class="tab-pane fade in active" id="home">
            <div class="container">
                <div class="slider-wrapper theme-default">
                    <div id="slider" class="nivoSlider">
                        <img src="i/6.jpg" alt="" />
                        <img src="i/1.jpg" alt="" />
                        <img src="i/2.jpg" alt="" />
                        <img src="i/3.jpg" alt="" />
                        <img src="i/4.jpg" alt="" />
                        <img src="i/5.jpg" alt="" />   
                    </div>
                </div>

                <div class="row">
                    <div class="span4">
                        <h2>Heading</h2>
                            <p>Etiam porta sem malesuada magna mollis euismod. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
                            <p><a class="btn" href="#">View details &raquo;</a></p>
                    </div>
                    <div class="span4">
                        <h2>Heading</h2>
                        <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risks. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
                        <p><a class="btn" href="#">View details &raquo;</a></p>
                    </div>
                    <div class="span4">
                        <h2>Heading</h2>
                        <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
                        <p><a class="btn" href="#">View details &raquo;</a></p>
                    </div>
                 </div>
            </div>
        </div>
        <div class="tab-pane fade" id="about">
            about
        </div>
        <div class="tab-pane fade" id="services">
            services
        </div>
        <div class="tab-pane fade" id="contact">
            contact
        </div>
        <div class="tab-pane fade" id="new_patient">
            new patient form
        </div>
      </div>

Answer 1

我必须添加转换脚本文件并包含“淡入”类以使其工作。请看这里的小提琴：http://jsfiddle.net/johnpapa/qSqpD/

Answer 2

看起来你必须使用类.tabbable

将.nav-tabs包装在另一个div中

Answer 3

以下是bootstrap togglable标签所需的相关html：

...
<link href="/static/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="/static/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
...
<div class="tabbable">
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab1" data-toggle="tab">tab1</a></li>
        <li><a href="#tab2" data-toggle="tab">tab2</a></li>
    </ul>
    <div class="tab-content">
        <div id="tab1" class="tab-pane active">tab1 content</div>
        <div id="tab2" class="tab-pane">tab2 content</div>
    </div>
</div>
...
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.7");</script>
<script src="/static/bootstrap/js/bootstrap-tab.js"></script>
...

以下是jfiddle

的示例实现

Twitter Bootstrap 2.0.1 Togglable标签无法正常执行

3 个答案: