根据活动ID引导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？这意味着当步骤-1是主动写1，当步骤-2主动写2等等.

这是工作小提琴？http://www.bootply.com/uSba2geIru

在引导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()));
});

Answer 2

使用jQuery：

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

关于选项卡的更多信息