javascript - Bootstrap选项卡刷新页面

Question

我只是想实现基本的 Bootstrap 选项卡功能，但是每当我单击选项卡时，页面都会刷新，而不仅仅是显示/隐藏相应的内容。是什么导致了这个问题？

<ul id="myTab" class="nav nav-tabs" role="tablist">
            <li class="active"><a href="#forcast" role="tab" data-toggle="tab">Forecast</a></li>
            <li><a href="#month" role="tab" data-toggle="tab">By Month</a></li>
            <li><a href="#ytd" role="tab" data-toggle="tab">YTD</a></li>
            <li><a href="#age" role="tab" data-toggle="tab">By Age</a></li>
            <li><a href="#overdue" role="tab" data-toggle="tab">Months Overdue</a></li>
            <li class="pull-right secondary-nav"><button class="btn btn-default btn-xs" ng-click="collapsedkpi=!collapsedkpi"><i class="glyphicon glyphicon-filter"></i> Filters</button></li>
        </ul>
        <div class="tab-content">
        <div class="tab-pane active" id="forcast">
            <div id="chartdiv"></div>
        </div>
        <div class="tab-pane" id="month">
            Hello Month
        </div>
        <div class="tab-pane" id="ytd">
            Hello YTD
        </div>
        <div class="tab-pane" id="age">
            Hello Age
        </div>
        <div class="tab-pane" id="overdue">
            Hello Overdue
        </div>
        </div>

Answer 1

这意味着您的 JavaScript 未运行或未加载。

打开控制台并查看错误消息

确保包含此行

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


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