单击下一步按钮以更改选项卡

Question

我不熟悉JQuery。我正在尝试在选项卡表单中创建“下一步”按钮，以便用户单击该按钮将转到下一个选项卡。在网上搜索并找到一种方式显示在下面。

我的php如下：

<div class="row-fluid" id="tabs">
    <ul class="nav nav-tabs">

      <li id="tab1" class="active"><a href="#add1" data-toggle="tab">My Tab 1</a></li>
      <li id="tab2"><a href="#add2" data-toggle="tab">My Tab 2</a></li>
      <li id="tab3"><a href="#add3" data-toggle="tab">My Tab 3</a></li>

    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="add1">
           hello I am in Tab 1
           <div style="float:right">                  
              <button type="button" id="theButton">Next</button>                  
           </div>
       </div>

       <div class="tab-pane" id="add2">
           hello I am in Tab 2
       </div>

       <div class="tab-pane" id="add3">
           hello I am in Tab 3
       </div>
    </div>
</div>

我的JQuery如下：

$(document).ready(function() { 
$("theButton").click(function(){       
       $("#tab1").addClass("").removeClass("active");
       $("#add1").removeClass("active");

       $("#tab2").addClass("active");
       $("#add2").addClass("active");
     });
})(jQuery);

还尝试使用如下的toggleClass，它也不起作用：

 $(document).ready(function() { 
   $("theButton").click(function(){       
     $("#tab1").toggleClass("active");
     $("#add1").toggleClass("active");

     $("#tab2").addClass("active");
     $("#add2").addClass("active"); 
   });
})(jQuery);

我正在尝试切换类，以便当我单击按钮时，Tab 1将变为非活动状态，并且选项卡2将处于活动状态。但它没有用。任何人都可以建议我该怎么做？