我的 html 页面中的活动元素出现问题答案

【问题标题】：Trouble with active element in my html page我的 html 页面中的活动元素出现问题
【发布时间】：2013-04-11 11:58:26
【问题描述】：

我正在寻找一种方法来使用 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 时，主页按钮保持活动状态！

【问题讨论】：

在那里添加活动类的代码是什么？
您需要将您的 li 值保存在数组中，例如 array('index'=>'home','page1'=>'page1') 等 .. 然后检查 $_SERVER 中的键（如果存在添加类）...要实现此功能，您需要保留菜单在标题中

标签： php html css class styles

【解决方案1】：

使用这个

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

DEMO

【讨论】：

当您导航到其他页面时，此样式不会保留在那里.. OP 想要更改他当前所在选项卡的样式.. 我想
查看 URL 的 - 它不是关于使用 JavaScript 切换类 :)

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：