title: Change tab color when button clicked
body: <p>I have a multi-step form and i wanted to add a button at the bottom of the page so the user can click next instead of clicking on the tabs at the top.</p>
  
  <p>The button works however, the tab's background color does not change when i click on next.</p>
  
  <pre><code>&lt;div class="right-col"&gt;     
      &lt;div class="profile-content"
                  &lt;ul id="profile-tabs" class="nav nav-tabs"&gt;
                      &lt;li class="active"&gt;
                          &lt;a href="#customer-tab" data-toggle="tab"&gt;Customer Info&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href="#lead-tab" data-toggle="tab"&gt;Lead Info&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  
      &lt;div class="tab-content tab-content-bordered panel-padding"&gt;
          &lt;div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board"&gt;
             &lt;form class="form-horizontal" action="leads_add_php.php" method="post" name="form1"&gt;
  
  
                          &lt;div class="form-group"&gt;
                              &lt;label for="tag" class="col-sm-3 control-label"&gt;Tag&lt;/label&gt;
                              &lt;div class="col-sm-9"&gt;
                                  &lt;input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;button type="button" id="next" name="next" class="btn btn-primary"&gt;Primary&lt;/button&gt;
   &lt;script&gt;
  
  $("#next").click(function(){ 
  $("#customer-tab").removeClass("active");
  $("#leads-tab").addClass("active");
  $("#leads-tab .theme-default .nav-tabs .a").css("background", "red");
  
  });
  &lt;/script&gt;
          &lt;/div&gt; 
  </code></pre>
  
  <p><a href="http://i.stack.imgur.com/td1Gw.png" rel="nofollow">BEFORE</a></p>
  
  <p><a href="http://i.stack.imgur.com/pdxUa.png" rel="nofollow">AFTER</a></p>
  
  <p>Here's the CSS when i inspect element</p>
  
  <pre><code>  element.style {
    }
    .theme-default .nav-tabs&gt;li.active&gt;a, .theme-default .nav-tabs&gt;li.active&gt;a:focus, .theme-default .nav-tabs&gt;li.active&gt;a:hover {
    background: #1d89cf;
    border-bottom: 2px solid #1a7ab9;
    }
  </code></pre>