Change tab color when button clicked

Question

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.

The button works however, the tab's background color does not change when i click on next.

<div class="right-col">     
    <div class="profile-content"
                <ul id="profile-tabs" class="nav nav-tabs">
                    <li class="active">
                        <a href="#customer-tab" data-toggle="tab">Customer Info</a>
                    </li>
                    <li>
                        <a href="#lead-tab" data-toggle="tab">Lead Info</a>
                    </li>
                </ul>

    <div class="tab-content tab-content-bordered panel-padding">
        <div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
           <form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">


                        <div class="form-group">
                            <label for="tag" class="col-sm-3 control-label">Tag</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
                            </div>
                        </div>

                        <button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
 <script>

$("#next").click(function(){ 
$("#customer-tab").removeClass("active");
$("#leads-tab").addClass("active");
$("#leads-tab .theme-default .nav-tabs .a").css("background", "red");

});
</script>
        </div> 

BEFORE

AFTER

Here's the CSS when i inspect element

  element.style {
  }
  .theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
  background: #1d89cf;
  border-bottom: 2px solid #1a7ab9;
  }

Answer 1

try this script

 var $tabs = $('.tabbable li');
    $('#nexttab').on('click', function() {
        $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
        $("#test").css("background-color", "red");

    });
    $('#test1').on('click', function() {
     $("#test").css("background-color", "white");
    });



   <form class="form-horizontal" action='/products/add/' method='post'>
          <fieldset>
          <div class="tabbable">
            <ul class="nav nav-tabs" id="tab_bar">
              <li class="active"><a href="#tab1" id="test1" data-toggle="tab">Product</a></li>
              <li><a href="#tab2" id="test" data-toggle="tab">Offer</a></li>
            </ul>

            <div class="tab-content">
              <!-- TAB 1 -->
              <div class="tab-pane active" id="tab1">
                <div class="control-group">
                  <label class="control-label" for="id_title">Title</label>
                    <div class="controls">
                      <input type="text" name="title">
                    </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="id_manufacturer">Manufacturer</label>
                    <div class="controls">
                      <input type="text" name="manufacturer">
                      <span class="help-inline">          
                    </div>
                    <div class="btn-group">

        <button class="btn" id="nexttab" type="button">Next</button>
    </div>
                </div>  
               </div>

              <!-- TAB 2 -->
              <div class="tab-pane" id="tab2">
                <div class="control-group">
                  <label class="control-label" for="id_condition">Condition</label>
                    <div class="controls">
                      <input type="text" name="condition">
                    </div>
                </div>
                <div class="control-group">
                  <label class="control-label" for="id_condition_note">Condition Note</label>
                    <div class="controls">
                      <input type="text" name="condition_note">
                    </div>
                </div>
              </div>            
            </div>
        <hr class="border-line"> <!-- STYLED IN FORMS.CSS -->

          </fieldset>
        </form>

working fiddle click here

Answer 2

You have to set id on li tag and give its color.

$(document).ready(function(){
  $("#next").click(function(){ 
$("#licustomer-tab").removeClass("active");
$("#lileads-tab").addClass("active");
$("#profile-tabs .active a").css("background-color", "red");

});
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<style>
.theme-default .nav-tabs>li.active>a, .theme-default .nav-tabs>li.active>a:focus, .theme-default .nav-tabs>li.active>a:hover {
  background: #1d89cf;
  border-bottom: 2px solid #1a7ab9;
  }
</style>
<div class="right-col">     
    <div class="profile-content">
                <ul id="profile-tabs" class="nav nav-tabs">
                    <li class="active" id="licustomer-tab">
                        <a href="#customer-tab" data-toggle="tab">Customer Info</a>
                    </li>
                    <li id="lileads-tab">
                        <a href="#lead-tab" data-toggle="tab">Lead Info</a>
                    </li>
                </ul>

    <div class="tab-content tab-content-bordered panel-padding">
        <div class="widget-article-comments tab-pane panel no-padding no-border fade in active" id="profile-tabs-board">
           <form class="form-horizontal" action="leads_add_php.php" method="post" name="form1">


                        <div class="form-group">
                            <label for="tag" class="col-sm-3 control-label">Tag</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" id="tag" name="tag" placeholder="Tag" onchange="document.getElementById('output_tag').innerHTML = this.value"/>
                            </div>
                        </div>

                        <button type="button" id="next" name="next" class="btn btn-primary">Primary</button>
        </div>