獲取類，並檢查該div有活動類

我有引導的標籤，我想根據這些標籤被激活，纔有可能做到這一點在這裏使用jQuery更改表格值是我的javascript獲取類，並檢查該div有活動類

$(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="" />

任何一個可以幫助我，當我點擊輸入字段的值是不會改變

來源

2017-03-21 Mark Alan

你有一個錯字; '.tabe-pane.active'應該是'.tab-pane.active' – George

有幾件事情是錯誤的。

您使用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); 
 
    }); 
 
});

<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="" />

來源

2017-03-21 11:52:06

請檢查當你點擊更改時測試它的show ma，因爲它應該顯示otc？ –

當我點擊家裏它顯示我otc，當我點擊更改測試它顯示我馬，因爲它應該是otc而不是馬 –

@MarkAlan現在檢查它 –

$(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="" />

來源

2017-03-21 12:00:07

獲取類，並檢查該div有活動類

回答

相關問題