Question

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

标签1,2＆amp; 3是一种形式，而标签4是另一种形式。当用户点击提交（只有一个提交按钮）时，我可以使用JQuery将数据从form1序列化传递到php页面，然后序列化form2并将其传递给php页面。

我遇到的问题是，只要我在第3个标签页之后移动结束<\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>

使用JQuery＆amp; amp; Tabbed Layout CSS

1 个答案: