如何使用选项卡窗格显示下一个div和上一个div？

Question

<form name="frmpro" id="frmpro" role="form" method="POST" enctype="multipart/form-data">
  <div class="tab-content">
    <div class="tab-pane active" role="tabpanel" id="step1">
      <div class="row">
        <div class="col-md-12">
          <div class="panel-body">
            <h1>ABC</h1>
            <ul class="list-inline pull-left">
              <li>
                <a href="#step2" class="btn btn-primary" data-toggle="tab">Next</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" role="tabpanel" id="step2">
      <div class="row">
        <div class="col-md-12">
          <div class="panel-body">
            <h1>XYZ</h1>
            <ul class="list-inline pull-right">
              <li>
                <a href="#step1" class="btn btn-primary" data-toggle="tab">Previous</a>
              </li>
              <li>
                <a href="#step3" class="btn btn-primary" data-toggle="tab">Next</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="tab-pane" role="tabpanel" id="step3">
      <div class="row">
        <div class="panel-body">
          <h1>PQR</h1>
          <ul class="list-inline pull-right">
            <li>
              <a href="#step2" class="btn btn-primary" data-toggle="tab">Previous</a>
            </li>
            <li>
              <button type="submit" name="submit" class="btn btn-danger">Save and continue</button>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</form>

在这段代码中，我创建了一个表单，其中三个ID为step1, step2, step3的div。现在，当我点击

<a href="#step2" class="btn btn-primary" data-toggle="tab">Next</a>

它显示下一个div，当我单击

<a href="#step1" class="btn btn-primary" data-toggle="tab">Previous</a>

它显示了上一个div，但当我再次单击时

<a href="#step2" class="btn btn-primary" data-toggle="tab">Next</a>

它不起作用。我为什么不呢？那么，如何解决此问题？请帮助我。

谢谢