如何根据页面更改 Bootstrap 类列表组项处于活动状态答案

【问题标题】：How to change a Bootstrap class list-group-item active depending on page如何根据页面更改 Bootstrap 类列表组项处于活动状态
【发布时间】：2017-12-25 21:10:34
【问题描述】：

所以，我有几个 html 文件，它们完全共享一些代码行。我有包含包含的代码，我在每一页中都调用它。它基本上是一个菜单或更好的说法，一个 Bootstrap 列表组。代码如下：

<div class="list-group">
    <a href="<?php echo cfgRoot; ?>/app/page1.php" class="list-group-item"><i class="glyphicon glyphicon-send"></i> Page1</a>
    <a href="<?php echo cfgRoot; ?>/app/page2.php" class="list-group-item"><i class="glyphicon glyphicon-cog"></i> Page2</a>
    <a href="<?php echo cfgRoot; ?>/app/page3.php" class="list-group-item active"><i class="glyphicon glyphicon-question-sign"></i> Page3</a>
    <a href="<?php echo cfgRoot; ?>/app/page4.php" class="list-group-item"><i class="glyphicon glyphicon-picture"></i> Page4</a>
</div>

问题在于，我需要根据我访问的页面来更改我的活动课程。因此，我们可以说菜单只有 99% 相同，我的意思是，需要更改该类。

解决此问题的最佳方法、建议或解决方案是什么？

【问题讨论】：

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

你可以通过jquery来完成

$(".list-group-item").on("click",function(){
    $(".list-group-item.active").removeClass('active');
    $(this).addClass('active');
});

【讨论】：

jignesh，我认为这不是 OP 所要求的。您的代码会在单击时更改类，但他只会在一瞬间看到它。他需要在登陆相应页面后立即将类设置为正确的菜单项

【解决方案2】：

您可以在准备好文档后检查 URL，然后将 active 类应用于您需要的元素。

$( document ).ready(function() {
    var url = window.location.href;

    if (url.IndexOf('page1') > -1) {
    $(".list-group:first-child").addClass("active");
    }

    // ... other cases, using switch for each

});

类似的东西

【讨论】：