麻烦与活动元素在我的html页面

Question

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

例如，如果用户在主页上，导航中的"Home"按钮的样式不同。

我使用以下代码:

<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时，home键保持活动状态!

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中是最后一个