在表单提交上依次启用选项卡

时间：2016-12-04 21:26:43

标签： javascript jquery forms

有4个标签，4个标签中有4个表单，我想编写一个jQuery程序，如果我在Form1中提交tab1，那么tab2包含的表单应该已启用，当我提交form2时，应启用包含表单3的tab3，直到我到达form4。

我编写了代码但它启用了所有标签而不是下一个标签。

我是jQuery的初学者，请在下面评论任何查询。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>

<div class="container">

  <ul class="nav nav-tabs" id="myLinks">
    <li class="active"><a data-toggle="tab" href="#home">Tab1</a></li>
    <li><a  href="#menu1">Tab2</a></li>
    <li><a  href="#menu2">Tab3</a></li>
    <li><a  href="#menu3">Tab4</a></li>
  </ul>

  <div class="tab-content" id="myTabs">
    <div id="home" class="tab-pane fade in active">
        <h1>Form 1</h1>
        <form>
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <button type="submit" class="btn btn-default">Submit</button>
		</form>
    </div>
    <div id="menu1" class="tab-pane fade">
        <h1>Form 2</h1>
        <form>
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <button type="submit" class="btn btn-default">Submit</button>
		</form>
    </div>
    <div id="menu2" class="tab-pane fade">
        <h1>Form 3</h1>
        <form>
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <button type="submit" class="btn btn-default">Submit</button>
		</form>
    </div>
    <div id="menu3" class="tab-pane fade">
        <h1>Form 4</h1>
        <form>
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <button type="submit" class="btn btn-default">Submit</button>
		</form>
    </div>
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript">
	$("#myTabs form").on('submit',function() {
	  $('#myLinks li a').each(function(){
	  	$(this).attr('data-toggle','tab');
	  });
	});
  </script>
</body>
</html>

2 个答案:

答案 0 :(得分：1)

这是另一种解决方案：Working fiddle

提交表单时，您需要show下一个标签。为此，您应该确定当前的li，然后为下一个data-toggle="tab"设置li。 

$("#myTabs form").on('submit',function(e) {
    e.preventDefault();
    var linkHref=$(this).parents('.tab-pane').attr('id');
    $('#myLinks li')
        .find('a[href="#'+linkHref+'"]')
        .parent()
        .next()
        .find('a').tab('show')
        .attr('data-toggle','tab');
});

答案 1 :(得分：0)

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Case</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

</head>
<body>

<div class="container">

  <ul class="nav nav-tabs" id="myLinks">
    <li class="active"><a data-toggle="tab" href="#home">Tab1</a></li>
    <li><a  href="#menu1">Tab2</a></li>
    <li><a  href="#menu2">Tab3</a></li>
    <li><a  href="#menu3">Tab4</a></li>
  </ul>

  <div class="tab-content" id="myTabs">
    <div id="home" class="tab-pane fade in active">
        <h1>Form 1</h1>
        <form>
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <button type="submit" class="btn btn-default">Submit</button>
		</form>
    </div>
    <div id="menu1" class="tab-pane fade">
        <h1>Form 2</h1>
        <form>
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <button type="submit" class="btn btn-default">Submit</button>
		</form>
    </div>
    <div id="menu2" class="tab-pane fade">
        <h1>Form 3</h1>
        <form>
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <button type="submit" class="btn btn-default">Submit</button>
		</form>
    </div>
    <div id="menu3" class="tab-pane fade">
        <h1>Form 4</h1>
        <form>
		    <div class="form-group">
		      <label for="email">Email:</label>
		      <input type="email" class="form-control" id="email" placeholder="Enter email">
		    </div>
		    <div class="form-group">
		      <label for="pwd">Password:</label>
		      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
		    </div>
		    <div class="checkbox">
		      <label><input type="checkbox"> Remember me</label>
		    </div>
		    <button type="submit" class="btn btn-default">Submit</button>
		</form>
    </div>
  </div>
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript">
	$("#myTabs form").on('submit',function() {
	  $('#myLinks li a').each(function(){
	  	$(this).attr('data-toggle','tab');
	  });
	});
  </script>
</body>
</html>

相关问题
最新问题