Question

我使用Bootstrap的制表符控件，但Bootstrap会自动在第一个class="active"项目上设置li。我怎么能禁用它？在我的代码中，我想自己处理它li项获得活动类。

现在我处于两个标签处于活动状态的情况，显然我不希望这样。

我正在使用Bootstrap v3.0.2

HTML：

<ul class="nav nav-tabs">
    <li data-ng-class="{'active': isTabVisible('elements')}">
        <a href="javascript:void(0)" data-ng-click="toggleTab('details')">@Resources.Building.Details</a>
    </li>
    <li data-ng-repeat="category in categories">
        <a href="javascript:void(0)" data-ng-click="toggleTab(category.Id)">{{category.Name}}</a>
    </li>
    <li data-ng-class="{'active': isTabVisible('elements')}">
        <a href="javascript:void(0)" data-ng-click="toggleTab('elements')" data-ng-show="current.Id > 0">@Resources.Building.Elements</a>
    </li>
</ul>

角度控制器：

$scope.currentTab = 'details';

// Check for a second # in the url
var parts = window.location.hash.split('#');
if (parts.length > 1) {
    var hash = parts[2];
    $scope.currentTab = hash;
};

$scope.isTabVisible = function (categoryId) {
    return $scope.currentTab == categoryId;
}

$scope.toggleTab = function (categoryId) {
    $scope.currentTab = categoryId;
}

Answer 1

您使用的是Bootstrap JS文件吗？这些是负责添加和删除CSS代码的某些部分的人。

如果您想自己控制所有这些，我建议您删除Bootstrap JS文件并使用AngularJS重写您需要做的任何事情（正如您当前使用的那样）。

这会让你失去一些功能。有一些版本的Bootstrap被重写为AngularJS，比如模态。

但是，如果您需要某些自定义功能或控制元素，则必须以任何方式重写或覆盖某些部分。

Answer 2

我使用AngularJS和AngularUI。它看起来很漂亮，直到你只需要在angular-ui中修改一些简单的东西。我的建议：不要浪费你的时间去理解一个不是为了调整的代码。例如：在angular-ui中，如果你使用旋转木马而你想要隐藏箭头，你必须重载CSS，没有像$ scope.opts = [showArrows：false]这样的选项。

可能最好用自己的指令或google编写一个指令。为标签编写代码并不难。

Answer 3

我知道这是一个非常老的问题，但是由于它是Google搜索结果的顶部，因此我将在此处放置此答案...

引导程序文档说Add data-toggle="button" to toggle a button’s active state.从父元素中删除data-toggle属性会导致相反的结果，从而阻止引导程序将“活动”添加到所单击的按钮。

如何防止bootstrap自动添加class ='active'？

3 个答案: