0

我的小提琴在这里：http: //jsfiddle.net/L4hkrwa6/14/

HTML 代码在这里：

<ul class="nav nav-pills nav-justified">
  <li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
  <li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
  <li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>

<div class="tab-content">
  <form action="test">
    <div id="Show1" class="tab-pane fade in active">
      <input type="text" name="OnlyMe"/>
    </div>
  </form>

  <form action="differentTest">
    <div id="Show2" class="tab-pane fade">
      <input type="text" name="MeAnd23Submit"/>
    </div>

    <div id="Show3" class="tab-pane fade">
      <input type="text" name="MeAnd23Submit2"/>
    </div>

    <input type="text" name="23"/>

    <input type="submit" value="submit"/>
  </form>

</div>

当我单击 Show1 时（以及最初加载页面时），我只想看到输入“OnlyMe”。

当我点击 Show2 时，我只想看到输入“MeAnd23Submit”、“23”和提交按钮。

当我点击 Show3 时，我只想看到输入“MeAnd23Submit2”、“23”和提交按钮。

我尝试了几种组合，但似乎没有任何效果，我将不胜感激......

提前致谢！

更新：这只是一个小例子，其中包含理解问题的必要项目。在“真实案例”中，我有更多输入字段，我不想在多个选项卡窗格中复制这些字段。

4

1 回答 1

1

你试过这个：forked fiddle

<ul class="nav nav-pills nav-justified">
  <li class="nav-item nav-link active"><a data-toggle="tab" href="#Show1">Show1</a></li>
  <li class="nav-item nav-link"><a data-toggle="tab" href="#Show2">Show2</a></li>
  <li class="nav-item nav-link"><a data-toggle="tab" href="#Show3">Show3</a></li>
</ul>

<div class="tab-content">
  <div id="Show1" class="tab-pane fade in active">
    <form action="test">
      <input type="text" name="OnlyMe"/>
    </form>
  </div>

  <div id="Show2" class="tab-pane fade">
    <form action="differentTest">
      <input type="text" name="MeAnd23Submit"/>        
      <input type="text" name="23"/>
      <input type="submit" value="submit"/>
    </form>
  </div>

  <div id="Show3" class="tab-pane fade">
    <form action="differentTest">
      <input type="text" name="MeAnd23Submit2"/>    
      <input type="text" name="23"/>
      <input type="submit" value="submit"/>
    </form>
  </div>
</div>
于 2018-07-12T13:16:42.143 回答