jquery - 使用 JQuery 和 CSS 的选项卡式布局

Question

我正在使用一个简单的选项卡布局来呈现一个表单，它似乎运行良好。但是我遇到了一个问题，我想使用两种形式而不是一种。

选项卡 1、2 和 3 是一种形式，选项卡 4 是另一种形式。当用户点击提交(只有一个提交按钮)时，我可以使用 JQuery 序列化来自 form1 的数据。将其传递给 php 页面，然后序列化 form2并将其传递给 php 页面。

我遇到的问题是一旦我移动结束 <\form>在第 3 个选项卡之后的标记会打乱布局。

点击第一个选项卡显示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

这是更新后的代码。更新 fiddle 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>