保持CSS下拉菜单项用php突出显示

Question

我的网站

在上面的链接上，您可以看到我有一个 CSS 下拉菜单在我的网站上。它工作正常，但是，我希望顶级项目在我位于它们所代表的页面上时保持突出显示。

到目前为止我已经有了，但它不起作用（我只显示一个菜单项，它没有任何子菜单，因为它节省空间）

这是 HTML：

<ul>
    <li><h2><a name="donate" id="donate" href="index2.php?op=Donate">Donate</a></h2></li>
</ul>

这是为背景着色的 CSS：

#menu a {
color: #000;
background: #efefef;
text-decoration: none;
}

每页的内容由$head的值决定：$head = $_GET['op'];

我尝试通过将其直接放在菜单后面来实现更改：

if($head == "Donate") {
echo '<style>
#menu a donate {
color: #000;
background: #fff;
text-decoration: none;
</style>';
}

当我将“捐赠”从上面的代码中删除时：“#menu a {”所有菜单项的背景颜色都会更改为白色，但我需要更改特别是“捐赠”按钮。我尝试通过将 id="donate" / name="donate" 添加到菜单项（如上所示），然后在 css 中使用“#menu a donate {”来调用它。但这显然是错误的，因为它不起作用！我应该怎么办？

Answer 1

我认为你需要使用

if($head == "Donate") {
    echo '<style>
    #menu a#donate {
        color: #000;
        background: #fff;
        text-decoration: none;
    }
    </style>';
}

作为选择器，因为 donate 是 a 标签的 id，因此它紧跟在 a 标签之后（没有空格），前面有一个“#”。

您还缺少 css 声明的“}”右括号。

Answer 2

好的，快速而肮脏的答案：你的 CSS 选择器将无法工作，因为现在它会在 id 为“menu”的标签内的“a”标签内搜索标签“donate”。我假设您的所有链接都有一个特定的 Id，因此最简单的方法是使用此选择器

 #donate
 {
     color: #000;
     background: #fff;
     text-decoration: none;
 }

作为一个额外的好处，此选择器将可以更快地被浏览器解析。

顺便说一句，你似乎没有关闭样式标签。这是一个错误吗？

现在，对于更长的答案，这并不是最好的方法。我建议您创建一个名为“currentpage”的 CSS 类，并在菜单中像这样使用它

<li><h2><a <?php if($head == "Donate") echo 'class="currentpage"'; ?> id="donate" href="index2.php?op=Donate">Donate</a></h2></li>

，这样您就可以将样式保留在样式表中，这样更容易维护。当然，如果您所有的菜单标签都是手工编码的，您可能会发现在每个标签中添加条件非常繁琐。如果确实如此，我建议您使用循环创建菜单。

顺便说一句，您应该删除 a 标记中的 name 属性，它是一个已弃用的功能。 id 的工作做得很好。

Answer 3

在这种情况下，您通常会为当前突出显示的项目使用 CSS 类：

<a href="..." class="highlight" ...>Current item </a>
<a href="..." ...>not current item</a>

这样，您就不会更改 id、名称或其他任何内容 - 只是：

• 当突出显示某个项目时，添加 css 类
• 当某个项目未突出显示时，删除 css 类。

如有必要，可以从 Javascript 添加该类，但也可以使用如下所示的方法从 PHP 生成该类：

<a href="..." <?php if ($current=='item1') {echo 'class="highlight"';} ?> ...>Current item </a>
<a href="..." <?php if ($current=='item2') {echo 'class="highlight"';} ?>...>not current item</a>

Answer 4

usgin css 你可以这样尝试：

#menu a:active {
color: #000;
background: red:
text-decoration: none;
}

使用 jquery 可以按如下方式完成：

首先创建一个如下所示的 css：

.active {
color: #000;
background: red:
text-decoration: none;
}

然后编写 jquery 代码：

$('#menu a').click(function(){
  $('#menu ul li h2').find('a.active').removeClass('active');
  $(this).addClass('active');
});

Answer 5

您应该使用 php 为当前页面项设置一个类，并使用 css 为该类设置规则。