使用jQuery和CSS的選項卡式佈局

Question

我使用簡單的選項卡布局來呈現表單，它似乎很好。但是我碰到一個問題，我想用兩種形式而不是一種。

標籤1,2 & 3是一種形式，標籤4是另一種形式。當用戶點擊提交（只有一個提交按鈕）時，我可以使用JQuery將來自form1的數據序列化到php頁面，然後序列化form2並將其傳遞到php頁面。

我有問題，一旦是我從它攪亂佈局的第三個標籤後，使封閉<\form>標籤..

點擊標籤一個顯示tab 1，點擊選項卡2所示tabs 2 & 4，點擊選項卡如圖3所示tab 3，點擊選項卡4顯示什麼..

jQuery的使用是這樣的：

$(document).ready(function(){ 
    $("ul#tabs li").click(function(e){ 
     if (!$(this).hasClass("active")) { 
      var tabNum = $(this).index(); 
      var nthChild = tabNum+1; 
      $("ul#tabs li.active").removeClass("active"); 
      $(this).addClass("active"); 
      $("ul#tab li.active").removeClass("active"); 
      $("ul#tab li:nth-child("+nthChild+")").addClass("active"); 
     } 
    }); 
}); 

，我已經創建了一個fiddle顯示問題

任何人都可以告訴我如何才能得到這個工作。

謝謝

Answer 1

這裏是更新的代碼。更新小提琴here

$(document).ready(function() { 
 
    $("ul#tabs li").click(function(e) { 
 
    // Remove active class from all li's 
 
    $("ul#tabs li").removeClass("active"); 
 
    
 
    // Add active class to the clicked/selected li only 
 
    $(this).addClass("active"); 
 
    
 
    // Get the index(position) of clicked li. Eg. if TAB1 is clicked this will return 0. if TAB4 is clicked this will return 3. 
 
    var i = $(this).index(); 
 
    
 
    // Remove active class from all #tab(content) 
 
    $("ul#tab li.active").removeClass("active"); 
 
    
 
    // Add the active class to #tab(content) at the position of clicked tab. 
 
    $("ul#tab li").eq(i).addClass("active"); 
 
    }); 
 
});

ul#tabs { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
ul#tabs li { 
 
    display: inline-block; 
 
    border-bottom: solid 1px #000; 
 
    padding: 10px 20px; 
 
    color: #000; 
 
    cursor: pointer; 
 
    font-size: 12px; 
 
} 
 
ul#tabs li.active { 
 
    background-color: #000000; 
 
    color: #ffffff; 
 
} 
 
ul#tab { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0 
 
} 
 
ul#tab li { 
 
    display: none; 
 
    padding: 0 15px 0 15px; 
 
    border: solid 1px #000; 
 
    background-color: #bbbbbb; 
 
} 
 
ul#tab li.active { 
 
    display: block; 
 
    min-height: 150px; 
 
} 
 
ul#tab li h2 { 
 
    color: #333333; 
 
    font-weight: 400; 
 
    margin-bottom: 10px; 
 
    padding-bottom: 10px; 
 
    border-bottom: solid 1px #000; 
 
} 
 
#wrapper { 
 
    width: 850px; 
 
    margin: 0 auto; 
 
} 
 
.container { 
 
    width: 50%; 
 
    margin: 0 auto; 
 
    padding: 0 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="wrapper"> 
 
    <ul id="tabs"> 
 
    <li class="active">TAB1</li> 
 
    <li>TAB2</li> 
 
    <li>TAB3</li> 
 
    <li>TAB4</li> 
 
    </ul> 
 

 
    <ul id="tab"> 
 
    <form id='form1'> 
 

 
     <!-- first tab --> 
 
     <li class="active"> 
 
     <h2>TAB1</h2> 
 
     </li> 
 
     <!-- first tab --> 
 

 
     <!-- second tab --> 
 
     <li> 
 
     <h2>TAB2</h2> 
 
     </li> 
 
     <!-- second tab --> 
 

 
     <!-- third tab --> 
 
     <li> 
 
     <h2>TAB3</h2> 
 
     </li> 
 
     <!-- third tab --> 
 
    </form> 
 

 
    <!-- fourth tab --> 
 
    <li> 
 
     <h2>TAB4</h2> 
 
     <form id='form2'> 
 

 
     </form> 
 
    </li> 
 
    <!-- fourth tab --> 
 

 
    <div class='formFooter'> 
 
     <div class='right'> 
 
     <input type='button' class='save' id='save' value='Save' /> 
 
     </div> 
 
    </div> 
 
    </ul> 
 
</div>