使用jQuery提交表单后，留在当前选项卡上 [英] Stay on a current tab after after submitting a form using jQuery

问题描述

我试图保留在"specif"选项卡上(在本例中为tab2)，但是在单击提交"按钮后，该选项卡将恢复为具有默认活动类别的选项卡1.我已经撞上了这堵砖墙.

I'm trying to stay on a specif tab ( in this case tab2 ) but after clicking the submit button the tab reverts to tab 1 which has the default class of active. I have hit a brick wall with this one.

这是我的示例 [jsfiddle] :

Here is my example [jsfiddle]:

HTML:

<ul class='tabs'>
            <li><a href='#tab1'>Tab 1</a></li>
            <li><a href='#tab2'>Tab 2</a></li>
        </ul>
<div id='tab1'>
            <h3>Section 1</h3>
            <p>Lorem ipsum dolor sit amet, consssectetur adipiscing elit. Donec lobortis placerat dolor id aliquet. Sed a orci in justo blandit commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.</p>
                <form id="form1" action="" method="post">            
      <input id="button-1" name="" type="submit" />
</form>
        </div>
<div id='tab2'>
<a name="tab2"></a>
            <h3>Section 2</h3>
            <p>Aenean et est tortor. In pharetra pretium convallis. Mauris sollicitudin ligula non mi hendrerit varius. Fusce convallis hendrerit mauris, eu accumsan nisl aliquam eu.</p>

    <form id="form2" action="" method="post">            
      <input id="button-2" name="" type="submit" />
</form>
        </div>
<div>
  <h2>RESULTS </h2>
</div>        

JavaScript:

JavaScript:

$(document).ready(function(){
    $('ul.tabs').each(function(){
        var $active, $content, $links = $(this).find('a');
        $active = $links.first().addClass('active');
        $content = $($active.attr('href'));
        $links.not(':first').each(function () {
            $($(this).attr('href')).hide();
        });

        $(this).on('click', 'a', function(e){
            $active.removeClass('active');
            $content.hide();
            $active = $(this);
            $content = $($(this).attr('href'));
            $active.addClass('active');
            $content.show();
            e.preventDefault();
        });
    });
});

CSS:

*         {padding:0; margin:0;}
html      {padding:15px 15px 0;font-family:sans-serif;font-size:14px;}
p, h3     {margin-bottom:15px;}
div       {padding:10px;width:600px;background:#fff;}
ul.tabs   {margin-left:2px;}
#tab1, #tab2 {border-top: solid 1px #ccc;margin-top: -1px; }
#tab2      {display:none;}a
ul.tabs li  {list-style:none;display:inline;}
ul.tabs li a   {padding:5px 10px;display:inline-block;background:#666;color:#fff;text-decoration:none;}
ul.tabs li a.active {background:#fff;color:#000;border: solid 1px #ccc; border-width: 1px 1px 0 1px;}

您的帮助将不胜感激

推荐答案

非常简单. 提交表格后，您必须自动单击所需的选项卡. 首先将Id放在这样的标签中 <a href='#tab1' id=idtab1 > <a href='#tab2' id=idtab2 > 然后在主体关闭之前使用Javascript

It's so easy. after submit your form you have to click on tab you want automatically. first put Id in your tabs like this <a href='#tab1' id=idtab1 > <a href='#tab2' id=idtab2 > and after that just use the Javascript before body close

<script> document.getElementById('idtab2').click(); </script>

<script> document.getElementById('idtab2').click(); </script>

这篇关于使用jQuery提交表单后，留在当前选项卡上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！