php - 我的 html 页面中的活动元素出现问题

Question

我正在寻找一种方法来使用 CSS 将显示属性更改为与当前活动页面相关的导航元素。

例如，如果用户在主页上，则导航中的“主页”按钮的样式会有所不同。

我使用以下代码：

<li class="active">
    <a href="<?php echo $sito ?>/index.php">Home</a>
</li>
<li>
    <a href="<?php echo $sito ?>/page1.html">page1</a>
</li>
<li>
   <a href="<?php echo $sito ?>/page2.html">page2</a>
</li>

当我选择 page1 或 page2 时，主页按钮保持活动状态！

Answer 1

用这个

var $links = $('li');
$links.click(function(){
   $links.removeClass('active');
   $(this).addClass('active');
});

演示

Answer 2

<li <?php if($page=='home'){?> class="active"<?php }?>>
    <a href="<?php echo $sito ?>/index.php">Home</a>
</li>
<li <?php if($page=='page1'){?> class="active"<?php }?>>
    <a href="<?php echo $sito ?>/page1.html">page1</a>
</li>
<li <?php if($page=='page2'){?> class="active"<?php }?>>
   <a href="<?php echo $sito ?>/page2.html">page2</a>
</li>

Answer 3

据我了解-您有一个静态页面。如果是这样 - 只需在 page1.html 和 page2.html 中添加class="active"对应的<li>

在 page1.html 中，它将是第二个<li>元素，但在 page2.html 中 - 最后一个