CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
user3240957
user3240957

Reputation: 41

Bootstrap nav bar

Hi at the minute here is my code

<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>

My questions are:

1.How do I make the tabs navigational? As in when when I click on 1 it appears selected and displays info in the tab section

2.How do I actually add information within the tab section? I'v tried using

tags etc.

I'm fairy new to all this so any advice is welcome.

Upvotes: 1

Views: 64

Answers (2)

user3240957
user3240957

Reputation: 41

Few mistakes on my behalf, realized my Spring Controller was pointing at the wrong jsp file. Secondly I hadn't included the Jquery library I needed.

Also I updated the code like so:

<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 -->

Upvotes: 0

Suganth G
Suganth G

Reputation: 5156

Try this:

DEMO

Use <div class="tab-content"> to show the respective contents

<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>

Upvotes: 1

Related Questions