Question

我使用引导标签创建了一个类似标签的时间轴。它只能工作4次，然后停止更改。我做了{{3}}请看一下。

代码：

<ul class="nav nav-tabs" role="tablist" id="timeline">
    <div class="col-sm-3"><li role="presentation"><a href="#2011" aria-controls="2011" role="tab" data-toggle="tab">2011</a></li></div>
    <div class="col-sm-3"><li role="presentation"><a href="#2013" aria-controls="2013" role="tab" data-toggle="tab">2013</a></li></div>
    <div class="col-sm-3"><li role="presentation"><a href="#2014" aria-controls="2014" role="tab" data-toggle="tab">2014</a></li></div>
    <div class="col-sm-3"><li role="presentation"><a href="#2016" aria-controls="2016" role="tab" data-toggle="tab">2016</a></li></div>
  </ul>

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade in active" id="2011">
        <p>1</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="2013">
    <p>2</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="2014">
    <p>
    3</p>
  </div>
  <div role="tabpanel" class="tab-pane fade" id="2016">
    <p>
        4
    </p>
  </div>
</div>

脚本：

$('#timeline a').click(function (e) {
  e.preventDefault()
  $(this).tab('show')
})

Answer 1

确保使用分号关闭代码语句;

还需要删除选项卡li的活动类。 Web开发工具是你的朋友。注意可能添加的课程

$('#timeline a').click(function (e) {
  $('#timeline li').removeClass('active');
  e.preventDefault();
  $(this).tab('show');
});

这里是小提琴https://jsfiddle.net/5253gmpu/

工作后，引导标签停止工作

1 个答案: