CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Azz
Azz

Reputation: 41

navbar isn't showing anything

I'm trying to have a navbar with 3 links. In each tab, I want to show a table and when I click on another link I want to show another table.

I'm trying to do this with the code below, but it's not working. I'm not getting anything displayed on the page.

Do you understand why it's not working?

html:

<body>
  <div class="container">
    <div class=".md-xs-4">
      <ul class="nav nav-pills">
        <li>
          <a href="#Table">Table Link</a>
        </li>
        <li>
          <a href="#Table2">Tabl2 Link</a>
        </li>
      </ul>
    </div>
    <div class=".md-xs-4">
      <div class="tab-content">
        <div class="tab-pane fade" id="Table">
          <table class="table" style="border: 1px solid #ddd;">
            <td>a</td>
            <td>b</td>
          </table>

          <div class="tab-content">
            <div class="tab-pane fade" id="Table2">
              <table class="table" style="border: 1px solid #ddd;">
                <td>a</td>
                <td>b</td>
              </table>

            </div>
          </div>
        </div>
      </body>

https://jsfiddle.net/z2kLaxaj/

Upvotes: 0

Views: 53

Answers (1)

NickyTheWrench
NickyTheWrench

Reputation: 3230

Your syntax is a bit off - and you're missing jQuery in your fiddle. Add the following code to your <head> before loading bootstrap.js:

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

And your code should look something like this:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  <ul class="nav nav-pills">
    <li class="active"><a data-toggle="pill" href="#table1">Table Link</a>
    </li>
    <li><a data-toggle="pill" href="#table2">Table Link 2</a>
    </li>
  </ul>

  <div class="tab-content">
    <div id="table1" class="tab-pane fade in active">
      <table class="table" style="border: 1px solid #ddd;">
        <td>a</td>
        <td>b</td>
      </table>
    </div>
    <div id="table2" class="tab-pane fade">
      <table class="table" style="border: 1px solid #ddd;">
        <td>a</td>
        <td>b</td>
      </table>
    </div>
  </div>
</div>

Upvotes: 1

Related Questions