多頁表格 html javascript

Question

我想創建一個多頁表單，其中只有我的第一頁不應該顯示 tab-pill，其余頁面應該顯示標簽但沒有第一頁標簽。

要導航到第一頁，僅應使用第二頁中的上一個按鈕。

我正在使用材料引導向導。

代碼筆鏈接

 $('.wizard-card').bootstrapWizard({... // Class dn: display:none onTabShow: .... if($current == 1){ console.log('first tab'); console.log(navigation.parent().addClass('dn')); console.log(tab); }else{ navigation.parent().removeClass('dn') }... //This is the JS code i wrote to hide the navigation bar in the first page

Answer 1

使用一些 css 和onInit ， onNext ， onPrevious您可以滿足您的需求：

首先要避免第一個選項卡單擊將指針事件設置為無，如下所示：

.wizard-navigation ul li:first-child {
   pointer-events:none;
   visibility:hidden
}

然后你必須隱藏向導初始化的選項卡：

onInit : function(tab, navigation, index){
      $(".wizard-navigation").hide(); // hiding tab wizard
      //... rest of code 
},

然后在 onNext 顯示導航選項卡：

然后你必須隱藏向導初始化的選項卡：

onNext : function(tab, navigation, index){
      $(".wizard-navigation").show(); // shiing tab wizard
      //... rest of code 
},

然后在 onPrevious 檢查 index === 0 然后再次隱藏它

onPrevious : function(tab, navigation, index){
     if(index === 0) $(".wizard-navigation").hide(); // hiding tab wizard
      //... rest of code 
},

這是一支筆