当前位置 : 主页 > 网页制作 > css >

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

来源:互联网 收集:自由互联 发布时间:2021-06-13
My Website 在上面的链接中,您可以看到我的网站中有一个CSS下拉菜单.它工作正常,但是,当我在他们所代表的页面上时,我希望顶级项目保持突出显示. 到目前为止我有这个但是它不起作用
My Website

在上面的链接中,您可以看到我的网站中有一个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>';
}

当我从上面的代码中留下’donate’:’#menu a {‘所有菜单项的背景颜色变为白色,但我需要专门更改’捐赠’按钮.我尝试通过将id =“donate”/ name =“donate”添加到菜单项(如上所示),然后使用’#menu a donate {‘在css中调用它来尝试这样做.但这显然是错误的,因为它不起作用!我该怎么办?

好的,快速而肮脏的答案:你的CSS选择器无法正常工作,因为现在它在标签内的“a”标签内搜索标签“捐赠”,ID为“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做得很好.

网友评论