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

});

像这样的东西

Answer 2

你可以通过jquery

完成

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

如何根据页面更改Bootstrap类list-group-item的活动状态

2 个答案: