javascript - 根据事件 ID Bootstrap 3 更改 innerHTML 文本？

Question

我有这样的东西

<p id="step-number">1</p>

还有这样的标签

<div class="tab-content">
<div id="step-1" class="tab-pane fade active in">
1
</div>
<div id="step-2" class="tab-pane fade">
2
</div>
<div id="step-3" class="tab-pane fade">
3
</div>
</div>

 <a href="#step-1" data-toggle="tab">STEP 1</a> 
 <a href="#step-2" data-toggle="tab">STEP 2</a> 
 <a href="#step-3" data-toggle="tab">STEP 3</a> 

我需要将 p 文本更改为事件的 div id？ 即step-1激活时写1，step-2激活时写2等。

这是工作 fiddle ？ http://www.bootply.com/uSba2geIru

是否可以在 bootstrap 3 或 jquery 中做到这一点？

Answer 1

试试这个:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
    $('#step-number').text($(e.target).text());
});

更多内容:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
   $('#step-number').text($.trim($($(e.target)[0].hash).html()));
});