jquery - 单击按钮时将 .active 类添加到 div？

Question

我将 Bootstrap 的选项卡系统用于“设置您的帐户”页面，并且在页面顶部我有不同的步骤，这些步骤显示在选项卡 Pane 上方的页面顶部。我试图做到这一点，当有人在第一步中单击一个选项时，它将加载第二步选项卡并将事件类添加到适当的步骤 div。我得到了这个工作，但无法弄清楚如何突出显示您当前正在进行的步骤。因此，如果您在完成基本配置文件的第一步，然后单击底部的保存并继续，它会加载下一个选项卡/步骤并将事件类添加到该步骤的适当 div。

所以，基本上我想让步骤移交“事件”类，类似于 Bootstrap 默认选项卡的功能，其中你所在的那个是突出显示的，除了这些“步骤”div 实际上不是一部分的标签系统，只需要受它的影响。

谢谢!

Answer 1

I am trying to make it so when someone clicks an option in step one it will load the step two tab and add the active class to the appropriate steps div.

因为您没有提供任何标记。我假设你不知道从哪里开始。如果您阅读 Bootstrap 文档，所有这些都可以放在一起。

首先是使用 data-toggle="tab" 属性设置标签标记。

<div class="text-center"> 
 <a class="btn btn-primary" href="#step1" data-toggle="tab">Step 1</a>
 <a class="btn btn-default" href="#step2" data-toggle="tab">Step 2</a>
 <a class="btn btn-default" href="#step3" data-toggle="tab">Step 3</a>
</div>

接下来，使用包含按钮的各个 Pane 设置选项卡内容。

<div class="tab-content">
  <div id="step1" class="tab-pane active">
     <div>
        <h1>Step 1</h1>
     </div>
     <div class="text-right"> 
         <a class="btn btn-default next" href="#">Next</a>
     </div>
  </div>
  ...
</div>

使用Bootstrap提供的例子，shown.bs.tab。 此事件在标签显示后触发。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

So if you're on step one which is to finish your basic profile, then click save and continue at the bottom, it loads the next tab/step and adds the active class to the appropriate div for that step.

创建一个点击事件来监听按钮点击并显示下一个 Pane 。

$('.next').click(function () {
    var nextId = $(this).parents('.tab-pane').next().attr("id");
    $('[href=#' + nextId + ']').tab('show');
});

这是一个 fiddle ，所有内容都放在一起供您查看。 http://jsfiddle.net/kmx4zx6n/