你好，我已经戳了大约 1/2 小时了 - 这似乎微不足道，但我想在这个问题上为客户提供良好的服务。
我们设置了一个表单，其中包含一系列选项卡内的部分。现在，我只是尝试在最后一个选项卡处于活动状态时将"保存并继续"按钮更改为"提交" - 用户点击"保存并继续"按钮或单击顶部的选项卡 - 稍后我们将添加提交验证等。但我认为让按钮文本更改工作会让我足够熟悉(由 sommeone 其他人(构建的内容，以便以后使用更复杂的东西。
什么是有效的：
- 当用户通过单击按钮到达最后一个选项卡时，该按钮会完美地更改名称。
- 当用户单击最后一个选项卡时，按钮会完美地更改名称......除非他们单击选项卡中的实际文本。仍会生成 click 事件，但 e.target.id 的控制台调用会引发空字符串。
导航选项卡的代码：
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li id="personalInfoTab" role="presentation" class="active"><a id="personalInfoLink" href="#personal-info" aria-controls="personal-info" role="tab" data-toggle="tab" class="hidden-xs"><strong>Personal Information</strong></a><a href="#personal-info" aria-controls="personal-info" role="tab" data-toggle="tab" class="visible-xs">Personal Info</a></li>
<li id="professionalInfoTab" role="presentation"><a id="professionalInfoLink" href="#professional-info" aria-controls="professional-info" role="tab" data-toggle="tab" class="hidden-xs"><strong>Professional Information</strong></a><a href="#contact-info" aria-controls="contact-info" role="tab" data-toggle="tab" class="visible-xs">Prof. Info</a></li>
<li id="expectationsTab" role="presentation"><a id="expectationsLink" href="#expectations" aria-controls="expectations" role="tab" data-toggle="tab" class="hidden-xs"><strong>Employment Expectations</strong></a><a id="expectationsLink" href="#expectations" aria-controls="expectations" role="tab" data-toggle="tab" class="visible-xs">Expectations</a></li>
<li id="settingsTab" role="presentation"><a id="settingsLink" href="#settings" aria-controls="settings" role="tab" data-toggle="tab" class="hidden-xs"><strong>Profile Settings</strong></a><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab" class="visible-xs">Settings</a></li>
</ul>按钮的代码：
<input type="submit" name="profile-continue" class="btn btn-danger" id="continueBtn" value="Save & Continue">和Jquery：
// Check which tab is active and set the Continue Button text
function initButtons() {
console.log($('#settingsTab'));
if ($('#settingsTab').hasClass('active')) {
$('#continueBtn').prop( 'value' , 'Submit');
}
else {
$('#continueBtn').prop( 'value' , 'Save and Continue');
}
};
initButtons();
/* The 'Continue' button behavior */
$('#continueBtn').click(function(){
// Activate the next tab
$('.nav-tabs > .active').next('li').find('a').trigger('click');
// Change the submit Button text accordingly
initButtons();
// Possible to-do: wrap in an 'if' statement that checks if there's any missing 'required' fields.
// Possible to-do: determine 'if' the tab selected is the last in the sequence.
// Possible to-do: grey/non-grey tabs (make accessible in sequnce).
}
);
$( 'a[data-toggle="tab"]' ).click(function(e){
console.log(e);
console.log('Target: ' , e.target.id);
// Check what tab was picked and submit Button text accordingly
if ( e.target.id === 'settingsLink' ) {
$('#continueBtn').prop( 'value' , 'Submit');
}
else {
$('#continueBtn').prop( 'value' , 'Save and Continue');
}
}
);好的，所以我在输入问题时就想通了这一点，但我想我仍然会在这里发布以帮助可能需要它的其他人。制表符文本位于"强"HTML 元素内，该元素是我尝试定位的选项卡的子元素。
所以我通过更改行来使其工作：
if (e.target.id === 'settingsLink' ) {...自：
if (e.target.id === 'settingsLink' || e.target.parentElement.id === 'settingsLink' ) {...希望它能为某人节省一些时间。