Javascript 动态设置`a href`元素

我有两个按钮，基本上是“下一个”和“上一个”按钮，用于带引导的选项卡式表单。当您从“介绍”选项卡转到“申请者”选项卡时，代码就会正常工作。唯一的问题是元素中有11个“选项卡”。我需要在每个选项卡上更改此

中的基本部分

我需要更改的是

href

，

style.width

，以及每次用户浏览表单时“onclick”函数末尾的两个

类名

<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>

在整个
选项卡窗格中依此类推

我想我可以做一些事情，比如，我真的不知道如何启动它，以及如何像我需要的那样更改特定的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>


//满足于此
//以此类推，所有11个标签都是如此。
//满足于此
给你。。。
这是使用Twitter引导和Jquery。。。
希望这对你有帮助。。。
进度条是一个有点黑客，但这是一个开始，我相信你可以从那里弄明白

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


然后你的HTML，我不知道你有什么，因为你没有提供那部分。。。所以我只是把一些东西砍掉了…但这应该和你的结构相似

    <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>







阿斯达斯达斯
ASDASDSAGRETERYTHGH
RTHRT
YUJGHJUJYUJEDGJHEGJ
我知道页面底部提供的javascript是无效的，我只是想说明我认为脚本可能是如何布局的。它不具有功能性。你需要发布标签的结构才能得到一个合适的答案，因为答案可能包括某种只能从htmlCuz结构中派生出来的父/子组合。这将涉及阅读你在哪个标签上，然后找出哪个标签在旁边，在左右两侧，根据要求，我用制表符结构更新了答案。我希望这就是你的意思：）是的，当一个处于活动状态时，它有“活动”类，是吗？好的，我玩了一些，它看起来像
必须在
内部，对吗？如果是这样，它与设计不起作用。我们可以为
指定一个特定的div吗？如果你愿意，你可以访问：这就是我正在处理的网页。好的，我刚刚更改了脚本，使用
的类而不是div来解决这个问题。是的，我只是想说：）除了那些该死的
可点击的部分以外，其他一切都正常：（我不明白从
中去掉
href
会有什么不同。
$(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)
   });

});

    <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>