你好我已经在这里捅了大约半小时 - 这或许似乎微不足道但是我想在这个上为客户提供良好的服务。
我们已经设置了一个表格，其中包含一系列标签内的部分。现在我只想尝试“保存并继续”＃39;按钮更改为＆＃39;提交＆＃39;当最后一个标签处于活动状态时 - 用户点击“保存并继续”按钮。按钮或单击顶部的选项卡 - 稍后我们将添加提交验证，等等。但我认为按钮文本更改工作将使我熟悉（由其他人提出）构建的内容以获得更复杂的东西以后工作。
什么工作：
导航标签的代码：
<!-- 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');
}
}
);
答案 0 :(得分：1)
好的，所以当我输入问题的时候，我想出了这一点，但我发现我仍然会在这里发帖，以帮助其他可能需要它的人。标签文本位于“强”HTML元素的内部，该元素是我尝试定位的标签的子。
所以我通过改变这条线来实现它：
if (e.target.id === 'settingsLink' ) {...
为：
if (e.target.id === 'settingsLink' || e.target.parentElement.id === 'settingsLink' ) {...
希望能节省一些时间。