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

这是小提琴吗？ 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()));
});

Answer 2

使用jQuery：

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

More about tabs

根据活动ID bootstrap 3更改innerHTML文本？

2 个答案: