如何将当前页面保留在Bootstrap ul中？

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

<div id="home">
  <h3>Home</h3>
  <p>This is the home page.</p>
</div>

<div id="profile">
  <h3>Profile</h3>
  <p>This is the profile page.</p>
</div>

<div id="messages">
  <h3>Messages</h3>
  <p>This is the messages page.</p>
</div>

<div id="settings">
  <h3>Settings</h3>
  <p>This is the settings page.</p>
</div>

$(document).ready(function(){
  $('.nav-tabs a').click(function(){
    $(this).tab('show');
  });
});