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);