Javascript Twitter Bootstrap 2.0.1可切换选项卡无法正确执行

我现在遇到了一个问题，当我尝试使用Twitter引导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>         

---

看起来您必须使用class.tabbable将.nav选项卡包装到另一个div中。tabbable

看起来您必须使用class.tabbable将.nav选项卡包装到另一个div中。以下是引导可切换选项卡所需的相关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>
...

---

下面是一个在

上的示例实现，下面是引导可切换选项卡所需的相关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>
...

---

这里是一个关于

的示例实现，我必须添加转换脚本文件并包含淡入类才能使其正常工作。请看这里的提琴：

我必须添加转换脚本文件并包含淡入类才能使其正常工作。看到这里的提琴：

修复了我的活动链接的问题…加载页面时，它没有关注第一个选项卡项，现在它关注了…但是选项卡似乎根本不起作用。在URL栏字段中，我可以看到它正在调用的节点ID…example index.htmlhome。它只是没有切换那个div的显示。它修复了我正在使用的活动链接的问题…当页面加载时，它没有关注第一个选项卡项，现在它关注了…但是选项卡似乎根本不起作用。在URL栏字段中，我可以看到它正在调用的节点ID…example index.htmlhome。它只是没有切换那个div的显示。