获取类并检查哪个div具有活动类

Question

我有引导选项卡，我想根据哪些选项卡处于活动状态来更改表单值是否可以使用jquery这样做是我的javascript

$(document).ready(function() {
  $('.tab').click(function() {
    var value_ch = $('.tabe-pane.active').attr('id');
    $('#valuechange').val(value_ch);
  });
});

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

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" id='ma' href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
  <li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>

<div class="tab-content">
  <div id="ma" class="tab-pane fade in active">
    <h3>First Value</h3>
  </div>

  <div id="otc" class="tab-pane fade">
    <h3>Second tab</h3>
  </div>
</div>

<input type="text" id="valuechange" value="" />

当我点击输入字段的值没有改变时，任何人都可以帮助我

Answer 1

有一些问题。

• 您使用id="ma" 2次，我从li a
中移除了$('.tab')
• 您使用tab但没有类$('.tabe-pane.active')
• 您有$('.tab-pane.active')但应该是$(document).ready(function() { $('a[data-toggle="tab"]').click(function() { var value_ch = $($(this).attr("href")).attr("id") // $('.tab-pane.active').attr('id'); $('#valuechange').val(value_ch); }); });

＆＃13;

＆＃13;

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

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
  <li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>

<div class="tab-content">
  <div id="ma" class="tab-pane fade in active">
    <h3>First Value</h3>
  </div>

  <div id="otc" class="tab-pane fade">
    <h3>Second tab</h3>
  </div>
</div>

<input type="text" id="valuechange" value="" />

＆＃13;

let body =  document.getElementsByTagName('body')[0];

 setTimeout( () => {
     this.setHeight(body.offsetHeight);
 }, 500);

 body.addEventListener('click', () => {
     this.setHeight(body.offsetHeight);
 });

＆＃13;

＆＃13;

＆＃13;

Answer 2

$(document).ready(function() {
  $('a[data-toggle="tab"]').click(function() {
    var value_ch = $('this').attr('href');
    $('#valuechange').val(value_ch);
  });
});

         

<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" id='ma' href="#ma"><i class="fa fa-mobile"></i> Home</a></li>
  <li><a data-toggle="tab" class='tab' href="#otc"><i class="fa fa-bank"></i> change test</a></li>
</ul>

<div class="tab-content">
  <div id="ma" class="tab-pane fade in active">
    <h3>First Value</h3>
  </div>

  <div id="otc" class="tab-pane fade">
    <h3>Second tab</h3>
  </div>
</div>

<input type="text" id="valuechange" value="" />