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

这是我检查元素时的CSS

  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

试试这个脚本

 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>

工作小提琴{{3}}

单击按钮时更改选项卡颜色

2 个答案: