0
您好，我一直在这里捅了半个小时 - 看起来很平常，但我希望为客户提供一个很好的服务。Bootstrap Nav选项卡点击Event Works除标签标签外请点击
我们已经在一系列选项卡中设置了一些表格。目前，我只是试图在最后一个标签页处于活动状态时将“保存并继续”按钮更改为“提交” - 通过用户点击“保存并继续”按钮或点击顶部的标签 - 稍后我们将添加提交验证等。但我认为，使用按钮文本更改工作可以让我足够熟悉（通过其他方式）构建的内容，以便稍后获得更复杂的内容。
什么工作：
- 当用户通过点击按钮到达最后一个选项卡按钮的变化非常名。
- 当用户点击最后一个标签时，该按钮完全改变了名字......除了当他们点击内部的实际文字标签时。 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的：
\t // Check which tab is active and set the Continue Button text \t
\t function initButtons() {
\t
\t \t console.log($('#settingsTab'));
\t \t
\t if ($('#settingsTab').hasClass('active')) {
\t \t $('#continueBtn').prop('value' , 'Submit');
\t }
\t else {
\t \t $('#continueBtn').prop('value' , 'Save and Continue');
\t }
\t };
\t
\t initButtons();
\t /* The 'Continue' button behavior */
\t $('#continueBtn').click(function(){
\t \t // Activate the next tab
\t \t $('.nav-tabs > .active').next('li').find('a').trigger('click');
\t \t // Change the submit Button text accordingly
\t \t initButtons();
\t \t // Possible to-do: wrap in an 'if' statement that checks if there's any missing 'required' fields.
\t \t // Possible to-do: determine 'if' the tab selected is the last in the sequence.
\t \t // Possible to-do: grey/non-grey tabs (make accessible in sequnce).
\t \t }
\t \t);
\t
\t $('a[data-toggle="tab"]').click(function(e){
\t \t console.log(e);
\t \t console.log('Target: ' , e.target.id);
\t \t // Check what tab was picked and submit Button text accordingly
\t \t
\t \t \t if (e.target.id === 'settingsLink') {
\t \t \t \t $('#continueBtn').prop('value' , 'Submit');
\t \t \t }
\t \t \t else {
\t \t \t \t $('#continueBtn').prop('value' , 'Save and Continue');
\t \t \t }
\t \t
\t \t }
\t \t);