6

特定のタブ (この場合は tab2 ) にとどまろうとしていますが、送信ボタンをクリックすると、タブはアクティブのデフォルト クラスを持つタブ 1 に戻ります。私はこれでレンガの壁にぶつかりました。

これが私の例です[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:

$(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;}

</p>

あなたの助けは大歓迎です

4

9 に答える 9

1

非常に簡単。フォームを送信した後、必要なタブを自動的にクリックする必要があります。最初にこのようにタブにIDを入れて <a href='#tab1' id=idtab1 > <a href='#tab2' id=idtab2 > から、本文を閉じる前にJavascriptを使用してください

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

于 2015-12-11T10:50:32.167 に答える
1

これを試して

<asp:HiddenField ID="hidAccordionIndex" runat="server" Value="0" />

これをコーディングに入れ、スクリプトを次のように変更します

$("#accordion").accordion({
header: "h3",
autoHeight: false,
event: "mousedown",
active: activeIndex,
ui: "PageName.aspx",
change: function (event, ui) {
var index = $(this).accordion("option", "active");
$('#<% =hidAccordionIndex.ClientID %>').val(index);
}
});
于 2012-09-26T04:40:53.013 に答える
1

URLにタブを指定できます。タブは、yourURL/#tab のような URL のアンカーです。

<form id="form2" action="#tab2" method="post">            

</form>
于 2014-06-07T07:37:33.033 に答える
1 
<div id="tab">
<ul>
            <li><a href='#tab1'>Tab 1</a></li>
            <li><a href='#tab2'>Tab 2</a></li>
        </ul>
</div>
<form id="form1" action="?tab=tab1" method="post"> 

The jQuery function:
$(document).ready(function(){
        $("#tab").tabs();
        var param = $(document).getUrlParam('tab');
        if (param !=null)
            $("#tab").tabs('select',param);
        else 
            $("#tab").tabs();
    });
于 2012-11-07T15:40:27.447 に答える
0

ユーザーが送信ボタンをクリックしたときに選択したタブの「id」を変数内に保存し、フォームがサーバーに投稿された後にそれを復元できます。詳細については、フォーム イベントを参照してください。

http://api.jquery.com/category/events/form-events/

于 2012-07-19T12:16:39.517 に答える
0

jquery Form Plugin を使用して、ページ全体を更新する代わりに ajax 経由でフォームを送信してみてください: http://www.malsup.com/jquery/form/

于 2012-07-19T12:17:53.990 に答える
0

タブの HTML は次のようになります -

<div class="tab">
   <input type="button"  class="tablinks" onclick="openTab(event, 'NewSummaries')" value="New Summaries" id="NewSummariesTab">
   <input type="button"  class="tablinks" onclick="openTab(event, 'EditedSummaries')" value="Edited Summaries" id="EditedSummariesTab">
</div>

Javascript を使用して、以前にクリックしたタブの ID をセッション変数に保存できます。何かのようなもの -

function openTab(evt, categoryName) {
  
  {....Your onclick functionality....}

  localStorage.setItem('CurTab',categoryName)
  var activeTab = localStorage.getItem('CurTab');
  console.log(activeTab);
}

したがって、セッション変数「curTab」には、最後にクリックされたタブ ID が含まれます。そして、タグの最初に以下のスクリプトを追加できます。これはデフォルトで、最後にアクティブなタブをクリックします-

<script>
document.getElementById(localStorage.getItem('CurTab')).click();
</script>
于 2022-03-02T06:35:52.090 に答える
0

送信ボタンのイベントでJQuery.ajax()を使用して、値を非同期にポストバックします。onclick()そうすれば、ポストバックがバックグラウンドで発生するため、ウィンドウのリロードは発生しません。

HTML

<form id="form2">            
      <input id="button-2" type="button" onclick="submit();" value="submit"/>
</form>

JavaScript

​function submit(){
   $.ajax({
  type: "POST",
  url: "submit.php",
  data: { param1: "param1", param2: "param2" }
  }).done(function() {
      alert( "Submitted" );
  });
  }​
于 2012-07-19T12:15:04.323 に答える