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”添加到菜单项（如上所示），然后使用'#menu a donate {'在css中调用它来尝试这样做。但这显然是错误的，因为它不起作用！我该怎么办？

Answer 1

我认为你需要使用

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

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

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

Answer 2

好的，快速而肮脏的答案：你的CSS选择器不会工作，因为现在它在标签内的“a”标签内搜索标签“donate”，其标识为“menu”。我假设你的所有链接都有一个特定的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

使用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为该类设置规则。

保持css下拉菜单项用PHP突出显示

5 个答案: