3

ブートストラップを使用したタブ付きフォームには、本質的に「次へ」ボタンと「前へ」ボタンの 2 つのボタンがあります。紹介タブから応募者タブに移動すると、コードは正常に機能します。唯一の問題は、要素に 11 個の「タブ」があることです。<a>各タブで変更するには、これに不可欠な部分が必要です。

私が変更する必要があるのは、ユーザーがフォームを進むたびに「onclick」関数の最後にあるhref、.style.width、および 2 つです。classNames

<a href="" data-toggle="tab" class="btn btn-primary pull-left hide" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Previous</a>

<a href="#applicant" data-toggle="tab" class="btn btn-primary pull-right" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Next</a>

ボタンに対応する必要があるセクションは、id11 セクションすべてで異なる で識別されます。

<div class="tab-pane" id="confirmation">

たとえば、ユーザーが導入タブから「次へ」ボタンをクリックすると、上記を次のように変更する必要があります (前のボタンの場合はその逆)。 

<a href="#introduction" data-toggle="tab" class="btn btn-primary pull-left" onclick="document.getElementById('progressBar').style.width='10%'; document.getElementById('introductionTab').className='active'; document.getElementById('applicantTab').className='';">Previous</a>

<a href="#applicant" data-toggle="tab" class="btn btn-primary pull-right" onclick="document.getElementById('progressBar').style.width='20%'; document.getElementById('applicantTab').className='active'; document.getElementById('introductionTab').className='';">Next</a>

などtab-panesです。

私は次のようなことができると考えています。それを開始する方法と、必要な特定の onclick 要素だけを変更する方法が本当にわかりません。

if(this tab-pane is something?) 
{
   document.getelementById('previous').href=""; 
   document.getelementById('previous').style.width="";
   document.getelementById('previous').className="";
}

コメントで要求されているように、タブは次のようにレイアウトされています。 

<div class="tab-content"> 
  <div class="tab-pane" id="introduction"> 
    //content here 
  </div> 
  <div class="tab-pane" id="applicant">  //and so on just like this for all 11 tabs.
    //content here
  </div>
</div>
4

1 に答える 1

3

どうぞ... これは Twitter のブートストラップと Jquery を使用しています... お役に立てば幸いです... プログレス バーはちょっとしたハックですが、それはスタートであり、そこから物事を理解できると確信しています.. .

唯一残念なことは、タブがクリック可能であることです。これは、タブをクリックできなくてもフォーム内を進むようにしたいため、望んでいたものではありません....しかし、ナットとボルトはここにあります。

デモはこちら

$(document).ready(function(){

  //Progress bar calculation
  function setProgress(){
    var length = $tabs.length;
    var index = ($('li').index($(".active")))+1;
    var width = (index/length)*100;
    $('#progressBar').css('width', width+'%');
  }

   var $tabs = $('#tab_bar li');
   setProgress();

   $('#prevtab').on('click', function () {
     $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
     setProgress();
   });

   $('#nexttab').on('click', function () {
     $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
     setProgress();
   });

   $tabs.click(function () {
    setTimeout(setProgress, 200)
   });

});

それからあなたのHTML、私はあなたが何のため< ul >に持っていたのかわかりません、あなたはその部分を提供しなかったので...だから私は何かをハックしました...しかしこれはあなたの構造に似ているはずです

    <ul class="nav nav-tabs" id="tab_bar">
      <li class="active"><a href="#introduction" data-toggle="tab">Intro</a></li>
      <li><a href="#secondtab" data-toggle="tab">SecondTab</a></li>
      <li><a href="#thirdtab" data-toggle="tab">Third</a></li>
      <li><a href="#fourthtab" data-toggle="tab">Fourth</a></li>
    </ul>    


 <div class="tab-content"> 

    <div class="tab-pane" id="introduction"> 
      asdasdasdas
    </div> 

    <div class="tab-pane" id="secondtab"> 
      asdasdsagreteryterythhgh
    </div> 

    <div class="tab-pane" id="thirdtab"> 
      rthrthrthrthrt
    </div> 

    <div class="tab-pane" id="fourthtab"> 
      yujghjuyjyujedgjhegj
    </div>

</div>


  <a class="btn" id="prevtab" type="button">Prev</button>
  <a class="btn" id="nexttab" type="button">Next</button>

デモはこちら

于 2013-06-12T05:42:09.700 に答える