如何使用 html、css、php 将项目设置为在侧边栏中激活

Posted 2023-03-05

【中文标题】如何使用 html、css、php 将项目设置为在侧边栏中激活

【英文标题】：How can I set an item as activated in sidebar using html,css,php

【发布时间】：2022-01-02 23:34:02

【问题描述】：

我有这个侧边栏

我希望通过将项目的颜色更改为白色并将图标更改为黑色来激活项目

这是我迄今为止尝试过的

Css 代码

.sidebar li a 

  display: flex;
  height: 100%;
  width: 100%;
  border-radius: 12px;
  align-items: center;
  text-decoration: none;
  transition: all 0.4s ease;
  background: #76b852;

.sidebar li a:hover
  background: #FFF;


.sidebar li a.active
    background-color: #FFF;
  color: white;

HTML 代码

 <li <?php if($currentFile=="dashboard.php")?>class="active"<?php ?>>
                    <a href="dashboard.php">
                        <i class="material-icons">
                            <span class="material-icons">dashboard</span>
                        </i>
                        <span class="links_name">Dashboard</span>
                    </a>
                    <span class="tooltip">Dashboard</span>
                </li>

问题似乎就在这里

.sidebar li a.active
background-color: #FFF; 
color: white;

当我只添加“l”而不添加“a”时，激活的项目显示如下截图

我没有网络开发经验，希望有人帮助我

【参考方案1】：

使用此代码：

<li <?php if($currentFile=="dashboard.php")?>class="active"<?php ?>>

您将active 类添加到li 元素。 因此，CSS 还必须在 li 元素上包含 active 类，而不是 a 链接。

.sidebar li.active a 
  background-color: #FFF;
  color: white;

您可能需要添加.sidebar li.active a:hover、.sidebar li.active a:active，具体取决于。 但首先让我们将 .active 选择器修复到错误的位置。

【讨论】：

非常感谢