如何在提交表单时选择第二个选项卡

How to set second tab as selected when submitting the form

本文关键字：选择 第二个 选项 表单 提交      更新时间：2023-09-26

我有一个任务做jquery选项卡。每个标签都有一些特殊的功能。当加载页面时，它会转到第一个选项卡。我想将第二个选项卡设置为选中>我该怎么做?我的代码是

 <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
     $(function() {
      $("#tabs").tabs();
      $("#tabs").tabs("option", {
        "selected": 2,
        "disabled": [1,2,3]
      });
    $( "input[type=checkbox]" ).click(function(){
        if ($(this).is(':checked')) {
         $('#tabs').tabs("enable", $(this).val());
         $('#tabs').tabs("select", $(this).val() );
        }
        else{
             $('#tabs').tabs("disable", $(this).val());
        }
    });
    });
    });//]]>  
    </script>

    </head>
    <body>
         <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nithin</a> </li>
    <li><a href="#tabs-2">Vipin</a></li>
    <li><a href="#tabs-3">Sachin</a></li>
    <li><a href="#tabs-4">Ganguly</a></li>
  </ul>
  <div id="tabs-1">
    <p>Nithin</p>
  </div>
  <div id="tabs-2">
  <form name="nithin">
  <b>Name</b>
  <input type="text" id="name">
    <input type="submit" value="submit" id="submit"/>
    </form>
  </div>
   <div id="tabs-3">
    <p>Sachin</p>
  </div>
   <div id="tabs-4">
    <p>Ganguly</p>
  </div>
</div>
<input type="checkbox" name="tabs-1" value="1">tabs-1 
<input type="checkbox" name="tabs-2" value="2">tabs-2 
<input type="checkbox" name="tabs-3" value="3">tabs-3 
<input type="checkbox" name="tabs-4" value="4">tabs-4 
<br>
    </body>

    </html>

你可以从http://jsfiddle.net/2aQ2g/35/

那是因为你把它禁用了。改为:

  $("#tabs").tabs("option", {
    "selected": 2,
    "disabled": [1,3]
  });

工作示例:http://jsfiddle.net/basarat/2aQ2g/34/

Update要根据提交的数据更改页面，您应该在服务器上修改页面上的输出。如果选择了2，则不要将其放在禁用列表中。

update 2如果你想阻止页面在提交时重新加载，你需要做自定义表单处理:

 // Do custom submit handling : 
 $('form').unbind('submit').submit(function(e)
                     {
                         e.preventDefault();
                         // place logic here: 
                     }
 );

示例:http://jsfiddle.net/basarat/2aQ2g/37/

$(document).ready(function() {    
 $( "#tabs" ).tabs( "option", {"selected":1, "disabled": [0, 2, 3 ] });
)};
相关文章：