带有下一个按钮的bootstrap选项卡导航

Question

我的导航下一个按钮无效。为您提供我的HTML。

<div class="white-box">
  <section>
    <div class="sttabs tabs-style-flip">
       <nav>
         <ul>

            <li class="active"  data-position='top'><a href="#section-flip-1" class="sticon fa fa-info-circle"><span>information</span></a></li>
            <li data-step="7"  data-position='top'><a href="#section-flip-2" class="sticon fa fa-university"><span>enroll</span></a></li>
            <li data-step="8" data-position='top'><a href="#section-flip-3" class="sticon fa fa-phone-square"><span> contact</span></a></li>
         </ul>
      </nav>
<div class="content-wrap">
            <section id="section-flip-1">
               <div class="row">
                   <div class="text-right">
                       <button type="button" id="btn1" class="fcbtn btn btn-danger btn-outline btn-1d">next <i class="fa fa-angle-right"></i>
                       </button>
                  </div>
                </div>
            </section>
            <section id="section-flip-2">
               <div class="row">
                   <div class="text-right">
                       <button type="button" id="btn2" class="fcbtn btn btn-danger btn-outline btn-1d">next <i class="fa fa-angle-right"></i>
                       </button>
                  </div>
              </div>
            </section> 
           <section id="section-flip-3">
                <div class="row">
                   content
               </div>
         </section>

在内容的每个div中，我有一个下一个按钮..点击它，我想移动到下一个标签，我不需要上一个标签，在最后一个标签中，我有提交按钮

<script language = 'javascript>
   $('#btn1').on('click', function() {
    if ($("#addStudentForm").valid()) {


       $("#tabs").tabs({
                            active: 1
                        });
      $("ul.nav li.active").removeClass("active");
      $(this).addClass("active");
      var current = $('#ui-id-2');
      current.css('background-color', '#a02d2d');
     current.css('color', '#ffffff');
    }
});