在加载 header 后保持持久活动 link class？

Question

我正在使用带有菜单的 Twitter bootstrap，我试图在单击某个项目时将其设置为活动 class。我可以通过单击事件删除和设置活动 class，但是在每个新页面加载 header.php 文件后，活动 class 将被删除。有没有办法在 header 文件加载后保持活动 class？

header.php

<ul class="nav menu">
    <li><a href="test-page1.php">Test Page 1</a></li>
    <li><a href="test-page2.php">Test Page 2</a></li>
    <li><a href="test-page3.php">Test Page 3</a></li>
</ul>

footer.php

<script type="text/javascript">  

$(document).ready(function() {

    $('.menu li').click(function(e) {
      $('.menu li.active').removeClass('active');
      var $this = $(this);
      if (!$this.hasClass('active')) {
          $this.addClass('active');
      }
    });

});

</script>

测试-page1.php

<?php 
  include_once dirname(__FILE__) . '/header.php';
?>

    Some sample test data

<?php
  include_once dirname(__FILE__) . '/footer.php';
?>

Answer 1

我不知道这是否是最优雅的解决方案，但我一直都是这样做的；在调用导航栏之前的 header 中，您有某种页面标识符，例如：

$pageID = 'home';

然后在 HTML 中，您可以这样设置：

<a href="home" <?php if($pageID == 'home'){ echo 'class="active"' }; ?>>home</a>

Answer 2

这是一个纯粹的Javascript解决方案。

var loc = location.pathname.substring(1);
$('.menu a[href="' + loc +'"]').parent().addClass('active');

这会找到您当前的页面名称并搜索匹配的 link。如果您正在使用 .htaccess 修改您的 url，这可能是不可能的，或者可能需要一些调整才能从您的 url 中获取正确的信息。有关从 url.

检索页面名称的其他选项，请参阅 this link

在加载 header 后保持持久活动 link class？

Maintaining a persistent active link class after loading the header?

html

javascript

jquery

twitter-bootstrap