ボタンをクリックしたときのタブの色の変更

Question

多段階のフォームがあり、ページの下部にボタンを追加して、ユーザーが上部のタブをクリックするのではなく次をクリックできるようにしました。

ボタンは機能しますが、次のボタンをクリックしてもタブの背景色は変わりません。

<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

私は要素

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

liタグにidを設定し、その色を指定する必要があります。

$(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>

Answer 2

FIDを作業

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> 

このスクリプトを試してみてくださいを検査するときここにCSSですdle click here