3

对于带有引导程序的选项卡式表单，我有两个按钮基本上是“下一个”和“上一个”按钮。当您从介绍选项卡转到申请人选项卡时，代码就可以正常工作。唯一的问题是元素中有 11 个“标签”。我需要<a>在每个选项卡上更改其中的重要部分。

每次用户浏览表单时，我需要更改的是“onclick”函数末尾的href、.style.width和两个。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...希望它对您有帮助...进度条有点 hack，但它是一个开始，我相信您可以从那里解决问题.. .

唯一糟糕的是选项卡是可单击的，这不是您想要的，因为您希望它们在表单中前进而无法单击选项卡....但是螺母和螺栓在这里

在这里演示

$(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 回答