保持CSS下拉菜单项突出显示php - keeping css drop down menu item highlighted with php

我的网站

在上面的链接中，你可以看到我的网站有一个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{"中留下"donate"时，所有菜单项的背景颜色都变成了白色，但我需要特别改变"donate"按钮。我尝试通过添加id="donate"/name="donate"到菜单项(如上所示)，然后在css中使用'#menu a donate{'调用它。但这显然是错误的，因为它不起作用!我该怎么办?

我认为你需要使用

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

作为选择器，因为donate是a标签的id，因此它紧接在a标签之后(没有空格)，前面有一个"#"。

你还缺少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>

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

顺便说一下，你应该删除标签中的name属性，这是一个不赞成的特性。

在这种情况下，您通常会对当前突出显示的项使用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>

在使用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');
});

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