如何使用引导程序添加活动样式答案

【问题标题】：How to add active style using bootstrap如何使用引导程序添加活动样式
【发布时间】：2016-07-20 22:24:48
【问题描述】：

美好的一天，我正在尝试添加一个活动样式以指示我的网络应用程序上的当前页面 bt 无法获得解决方案，我查看了以前的帖子和答案，我看到了这个据说有效的地方

<ul class="nav">
 <li><a data-target="#" data-toggle="pill" href="#accounts">Accounts</a></li>
 <li><a data-target="#" data-toggle="pill" href="#users">Users</a></li><br/> 
</ul>

当我在这段代码中使用 data-toggle 属性时

<ul class="nav nav-tabs">
            <li class="colour">@Html.ActionLink("Staffs", "addStaff", "SchlAdmin")</li>
            <li class="colour" data-toggle="tab">@Html.ActionLink("Students", "addStudent", "SchlAdmin")</li>
            <li class="colour">@Html.ActionLink("Incidents", "staffInc", "SchlAdmin")</li>
            <li class="colour" data-toggle="tab">@Html.ActionLink("Admin", "addasset", "SchlAdmin")</li>
            <li class="colour">@Html.ActionLink("Search", "staffSearch", "SchlAdmin")</li>
            <li class="colour" data-toggle="tab">@Html.ActionLink("Profile", "prof", "SchlAdmin")</li>
        </ul>

我无法重定向到具有 data-toggle 属性但使该页面处于活动状态的页面。

【问题讨论】：

标签： c# css twitter-bootstrap asp.net-mvc-5

【解决方案1】：

我已经提出了同样的问题。请查看我的代码，我认为它对您有帮助，如果您有任何问题，我已准备好回答您。

查看：

            <ul class="nav nav-tabs" id="myTab">
                <li id="activeTab" class="active"><a data-toggle="tab" href="#active">Active</a></li>
                <li id="currentTab" class=""><a data-toggle="tab" href="#current">Current</a></li>
                <li id="completedTab" class=""><a data-toggle="tab" href="#completed">Completed</a></li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div id="active" class="tab-pane fade active in">
                    @Html.Action("Active", "Home")
                </div>
                <div id="current" class="tab-pane fade">
                    @Html.Action("Current", "Home")
                </div>
                <div id="completed" class="tab-pane fade in">
                    @Html.Action("Completed","Home")
                </div>
            </div>

JavaScript - 当需要从 URL 中捕获活动标签并使其打开时

 $(document).ready(function() {
        var tab = @ViewBag.tabId;
        switch (tab) {
        case 1:
            removeAllActiveTabs();
            $('#activeTab').addClass('active');
            $('#active').addClass('active');
            $('#active').addClass('in');
            break;
        case 2:
            removeAllActiveTabs();
            $('#currentTab').addClass('active');
            $('#current').addClass('active');
            $('#current').addClass('in');
            break;
        case 3:
            removeAllActiveTabs();
            $('#completedTab').addClass('active');
            $('#completed').addClass('active');
            $('#completed').addClass('in');
            break;
        default:
            $('#activeTab').addClass('active');
            $('#active').addClass('active');
            $('#active').addClass('in');
            break;
        }
    });

    function removeAllActiveTabs() {
        $('#myTab').each(function() {
            $(this).find('li').removeClass('active');
        });
        $('#myTabContent').each(function() {
            $(this).find('div').removeClass('active');
            $(this).find('div').removeClass('in');
        });
    }

JavaScript - 如果您想在标签更改时更改 URL

   //When Client click on Tabs show in URL
    $('#activeTab').on('click',function() {
        window.history.pushState('','','/Home/SomeAction?tabId=1');
    });
    $('#currentTab').on('click',function() {
        window.history.pushState('','','/Home/SomeAction?tabId=2');
    });
    $('#completedTab').on('click',function() {
        window.history.pushState('','','/Home/SomeAction?tabId=3');
    });

【讨论】：

【解决方案2】：

您需要为您的 li 添加一个 active 类名。示例：

<li class="active"><a data-target="#" data-toggle="pill" href="#users">Users</a></li>

【讨论】：

向特定的 li 元素添加活动的类名只会使该类处于活动状态，当我切换选项卡时，该类仍然保持活动状态