javascript - 如何根据页面更改 Bootstrap 类列表组项目的事件状态

Question

所以，我有几个 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% 相同，我的意思是，该类需要更改。

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

Answer 1

您可以在文档准备好后检查 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

});

类似的事情