php和mysql使用bootstrap 3创建选项卡

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">选项卡1</a></li>
  <li><a href="#tab2" data-toggle="tab">选项卡2</a></li>
  <li><a href="#tab3" data-toggle="tab">选项卡3</a></li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="tab1">
    <h3>选项卡1的内容</h3>
    <p>这里是选项卡1的详细内容。</p>
  </div>
  <div class="tab-pane" id="tab2">
    <h3>选项卡2的内容</h3>
    <p>这里是选项卡2的详细内容。</p>
  </div>
  <div class="tab-pane" id="tab3">
    <h3>选项卡3的内容</h3>
    <p>这里是选项卡3的详细内容。</p>
  </div>
</div>

<script>
  $(function() {
    $('.nav-tabs a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    });
  });
</script>