CSS Set Bootstrap Item Active

Question

我有以下链接

<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>

但是，我想这样做，所以链接设置为＆＃34;活跃＆＃34;在页面底部加载。什么是适当的CSS或JScript来做到这一点？

谢谢

Answer 1

您可以尝试这样做：

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

这将为第一个元素提供“活跃的”＆＃39;

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

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

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

Answer 2

我认为正确的方法是使用标识符并将代码放在ready函数中，请查看以下示例。

希望这有帮助。

Javascript片段：

document.addEventListener("DOMContentLoaded", function(event) { 
    var home_link = document.getElementById('Home');
    home_link.className = home_link.className+' active';
});

.active{
  color: green;  
}

<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>

Jquery片段：

$(function(){
  $('#Home').addClass('active');
})

.active{
   color: green;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

Answer 3

如果您希望使用jQuery的一行解决方案，那么就是解决方案：

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