Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Michael Cook
.a{fill-rule:evenodd;}techdegree seal-36
Michael Cook
Full Stack JavaScript Techdegree Graduate 28,975 Points

Why is the content of the first tab replaced after clicking to another tab?

This question has to do with Bootstrap nav tabs. I have a set of Bootstrap tabs, but if I click away from the first tab to another tab and then back to the first tab, the content of the first tab is replaced with the content of the last clicked tab. I have no idea why this is happening and cannot find a solution to the problem.

I've already done a bunch of googling and can't find any solution. Here is the code:

<div class="col">
    <h3>Account Settings</h3>
    <ul class="nav nav-tabs mt-4" id="settingsTabs" role="tablist">
      <li class="nav-item">
        <a class="nav-link active" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="true">Account</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#followers" role="tab" aria-controls="followers" aria-selected="false">Followers</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#following" role="tab" aria-controls="following" aria-selected="false">Following</a>
      </li>
    </ul>

    <div class="tab-content" id="settingsContent">

     <div class="tab-pane fade show active" id="account" role="tabpanel" aria-labelledby="account-tab">
         <div class="mt-5">
             <h4>Change Username</h4>
             <form action="/account" method="POST">
                 <div class="row">
                     <div class="col-6">
                         <input type="text" class="form-control" name="newUsername" placeholder="New Username" />
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-6 pb-5 border-bottom">
                         <input type="text" class="form-control mt-3" name="confirmUsername" placeholder="Confirm Username" />
                         <input type="submit" class="btn btn-sm btn-secondary mt-2" value="Save" />
                     </div>
                 </div>
             </form>
         </div>
         <div class="mt-5">
             <h4>Change Password</h4>
             <form action="/account" method="POST">
                 <div class="row">
                     <div class="col-6">
                         <input type="password" class="form-control" name="newPassword" placeholder="New Password" />
                     </div>
                 </div>
                 <div class="row">
                     <div class="col-6 pb-5 border-bottom">
                         <input type="password" class="form-control mt-3" name="confirmPassword" placeholder="Confirm Password" />
                         <input type="submit" class="btn btn-sm btn-secondary mt-2" value="Save" />
                     </div>
                 </div>
             </form>
         </div>
     </div>

     <div class="tab-pane fade" id="settings" role="tabpanel" aria-labelledby="settings-tab">
        <div>
            This is the settings tab
        </div>
     </div>

     <div class="tab-pane fade" id="followers" role="tabpanel" aria-labelledby="followers-tab">
        This is the followers tab
     </div>

     <div class="tab-pane fade" id="following" role="tabpanel" aria-labelledby="following-tab">
        This is the following tab
     </div>

  </div>
</div>

This is super frustrating. Help would be greatly appreciated!

1 Answer

Ryan Purcell
Ryan Purcell
14,039 Points
Ryan Purcell
Ryan Purcell
14,039 Points

I took your code and put it in a jsfiddle https://jsfiddle.net/1zk7p0ow/ and it worked. Do you have your JavaScript set up correctly (jQuery loaded first and then Bootstrap.js next)?