使用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>