Bootstrap导航栏

Question

您好，我的代码

<div class="row-fluid" id="projectTabs">
    <div class="col-md-7">
        <br>
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#">Favourites</a></li>
            <li><a data-toggle="tab" href="#">Customer</a></li>
            <li><a data-toggle="tab" href="#">Non-Chargeable</a></li>
            <li><a data-toggle="tab" href="#">Global</a></li>
        </ul>
    </div>
</div>

我的问题是：

1.如何使标签导航？当我点击1时，它显示为已选中并在选项卡部分显示信息

2.如何在标签部分实际添加信息？我尝试使用

标签等。

我对这一切都很陌生，所以欢迎任何建议。

Answer 1

试试这个：

DEMO

使用<div class="tab-content">显示相应的内容

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
  <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
  <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
  <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home">Home</div>
  <div class="tab-pane" id="profile">Profile</div>
  <div class="tab-pane" id="messages">Message</div>
  <div class="tab-pane" id="settings">Settings</div>
</div>

Answer 2

我的错误很少，意识到我的Spring Controller指向了错误的jsp文件。 其次，我没有包含我需要的Jquery库。

我也像这样更新了代码：

<div class="tabbable">
            <ul class="nav nav-tabs">
                <li<a href="#pane1" data-toggle="tab">Favourites</a></li>
                <li><a href="#pane2" data-toggle="tab">Customer</a></li>
                <li><a href="#pane3" data-toggle="tab">Non-Chargeable</a></li>
                <li><a href="#pane4" data-toggle="tab">Favourites</a></li>
            </ul>
            <div class="tab-content">
                <div id="pane1">
                <p> content</p>
                </div>
                <div id="pane2" class="tab-pane">
                <p> and so on ...</p>
                </div>
                <div id="pane3" class="tab-pane">
                <p> and so on ...</p>
                </div>
                <div id="pane4" class="tab-pane">
                 <p> and so on ...</p>
                </div>
            </div><!-- /.tab-content -->
        </div><!-- /.tabbable -->