1
여러 단계로 구성된 양식이있어서 사용자가 상단의 탭을 클릭하지 않고 다음을 클릭 할 수 있도록 페이지 하단에 버튼을 추가하고 싶습니다.버튼을 클릭 할 때 탭 색상 변경
버튼은 작동하지만 다음을 클릭하면 탭의 배경색이 변경되지 않습니다. 내가 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>
를 시도 요소를
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;
}