Html 如何使当前选项卡显示为活动状态？

当我在特定链接页面时，我试图将引导中的这些选项卡设置为活动。我是网页设计新手。有人知道怎么做吗？这是我的html代码

  <div id="top">
       <ul class="nav nav-tabs">
           <li class="active"><a href="index.php">Home</a></li>
           <li><a href="history.php">History</a></li>
           <li><a href="leader.php">Leaderboard</a></li>
           <li><a href="talk.php">Comments</a></li>
       </ul>
  </div>

如果href与当前页面的URL匹配，则使用此javascript将活动类添加到父级

li

：

<script type="text/javascript">
    jQuery(document).ready(function($){
        var url = window.location.href;
        $('.nav a[href="'+url+'"]').parent().addClass('active');
    });
</script>

jQuery（文档）.ready（函数（$）{
var url=window.location.href；
$（'.nav a[href=“'+url+''“]）.parent（）.addClass（'active'）；
});

如果您使用的是php，那么在服务器端使用php比使用Javascript更好