简体   繁体   English

带有jQuery的标签(默认标签)

[英]tabs with jquery (default tab)

I use a simple jquery code for tabs, the idea of it: in each tab I have a form when i submit each form the code will give me values from mysql . 我为标签使用一个简单的jquery代码,其思想是:在每个标签中,当我提交每种表单时,我都有一个表单,该代码将为我提供mysql的值。 The problem is when i submit a form in for example tab 3 it will redirect me to the first tab (default tab), before I show any result. 问题是,当我在例如选项卡3中提交表单时,它将在显示任何结果之前将我重定向到第一个选项卡(默认选项卡)。 any suggestion to solve this problem. 任何解决此问题的建议。 thanks in advance, My Code : 预先感谢,我的代码:

 <script type="text/javascript">
 $(function() {
 $( "#tabs" ).tabs();
   });
</script>

HTML code : HTML代码:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
        <li><a href="#tabs-3">tab 3</a></li>
    </ul>
    <div id="tabs-1">
         <p>tab 1 content</p>
    </div>
    <div id="tabs-2">
         <p>tab 2 content</p>
    </div>
    <div id="tabs-3">
         <p>tab 3 content</p>
    </div>

</div>

If you use php, you could use for eg hidden html-field in form which contains number of the tab. 如果您使用php,则可以使用包含选项卡编号形式的隐藏html字段。 When submitting form you could parse that variable and use it in jQuery-code. 提交表单时,您可以解析该变量并在jQuery代码中使用它。 If you use php inside jQuery code could look like this: 如果您在jQuery代码中使用php,则可能如下所示:

$("#tabs").tabs({ 
    selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?> 
});

You jest use this code 您开玩笑地使用此代码

$( ".selector" ).tabs( "load", 2 );

after loading call this one so you can select 2 tab. 加载后将其称为1,以便您选择2标签。 Try it!! 试试吧!!

You can pass parameters to tabs() function (http://api.jqueryui.com/tabs/) 您可以将参数传递给tabs()函数(http://api.jqueryui.com/tabs/)

 <script type="text/javascript">
 $(function() {
     $( "#tabs" ).tabs({active: 2});
 });
 </script>

you said "forms" if you submit the form, the page will send data and refresh itself. 您说“表单”,如果您提交表单,页面将发送数据并刷新自身。 Just use a button and when the button is clicked, send the ajax. 只需使用一个按钮,然后单击该按钮,即可发送ajax。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM