Question

我使用twitter bootstrap和菜单，我试图在点击项目时设置活动类。我能够通过单击事件删除和设置活动类，但在header.php文件加载每个新页面后，活动类将被删除。有没有办法在头文件加载后维护活动类？

的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

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

$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');

找到您当前的页面名称并搜索匹配的链接。如果您使用.htaccess修改您的网址，可能无法做到这一点，或者可能需要进行一些调整才能从您的网址获取正确的信息。有关从网址中检索网页名称的其他选项，请参阅this link。

加载标题后维护一个持久的活动链接类？

2 个答案: