Javascript CSS设置引导项处于活动状态

我有以下链接

<div class="list-group">
    <a href="link1.html" class="list-group-item" id="Home">Link1</a>
    <a href="link2.html" class="list-group-item">Link2</a>
    <a href="link3.html" class="list-group-item">Link3</a>        
</div>

我可以使用以下代码将项目设置为活动：

<a href="#" class="list-group-item **active**">Link1</a>

但是，我想使链接在页面加载的底部设置为“活动”。正确的CSS或JScript是什么

---

谢谢

您可以尝试这样做：

$(document).ready(function() {
    $(window).on('load', function(){
        $('.list-group-item').first().addClass('active')
    })
)};

这将给第一个元素类“active”

注意：这种方法需要加载jQuery

如果不使用jQuery，可以这样做：

window.onload = function() {
  document.getElementById('Home').className = 'active';
};

---

我认为正确的方法是使用标识符并将代码放入

ready

函数中，检查下面的示例

希望这有帮助

---

Javascript代码段：

document.addEventListener（“DOMContentLoaded”，函数（事件）{
var home_link=document.getElementById（'home'）；
home_link.className=home_link.className+“活动”；
});
.active{
颜色：绿色；
}
如果您希望使用
jQuery
的单行解决方案，以下是解决方案：

$('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');