使用 SSI 的 CSS 导航栏上的“选择”按钮答案

【问题标题】：'Selecting' buttons on a CSS Navbar using SSI使用 SSI 的 CSS 导航栏上的“选择”按钮
【发布时间】：2013-02-03 05:35:46
【问题描述】：

我正在开发一个网站，我正在使用 SSI 将横幅/菜单/页脚附加到我网站上的每个页面。我遇到的问题是在每个不同页面的菜单上显示“已选择”状态。

为了避免混淆，整个导航栏是一个固定高度/宽度的图像，并且位置会随着按钮状态的变化而改变。

我目前所拥有的：

index.html

<!--#include virtual="./global_header.html" -->
<!--#include virtual="./global_footer.html" -->

    /**Yeah, that's it for index.html at the moment. Like I said, a work in progress**/

header.html

<!DOCTYPE...

<div class="s_container" id="s_menu">
    <ul id="navbar">
        <li id="menu_borderl"><p>[</p></li>
        <li id="menu_home"><a href="index.html" title="Home">Home</a></li>
        <li id="menu_forum"><a href="/forum/" title="Forum">Forum</a></li>
        <li id="menu_apply"><a href="apply.html" title="Apply">Apply</a></li>
        <li id="menu_about"><a href="about.html" title="About">About</a></li>
        <li id="menu_borderr"><p>]</p></li>
    </ul>
</div>...

CSS：

ul#navbar {
    width:1000px;
    list-style:none;
    height:76px;
    margin:0px;
    padding:0px;
}

ul#navbar li {
    display:inline;
}

ul#navbar li a {
    height:76px;
    float:left;
    text-indent:-9999px;
}

ul#navbar li p {
    height:76px;
    float:left;
    text-indent:-9999px;
    margin:0px;
}

/**HOME**/
/**I have these once for each button, with the correct x,y for the bg position**/
ul#navbar li#menu_home a {
    width:205px;
    background:url(images/menu_buttons.png) no-repeat -75px 0;
}
ul#navbar  li#menu_home a:hover {
    background-position:-75px -76px; 
}
ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

如果我将class="current" 添加到任何 li 中，它会按预期工作。

现在是我的问题，如果很明显很抱歉，但我对此很陌生。有什么方法可以在“index.html”中放置一些代码以将“当前”类添加到给定的行项目？感谢您的帮助，如果它非常明显，我们很抱歉。如果您需要更多信息，请告诉我。

已解决

由于我是新人，我还要等几个小时才能回答我的问题，但我要发布以下内容：

编辑

根据 leftclickbens 的建议对 index.html 中的代码进行了一些更改，以摆脱 !important

所以我想通了。对于上面的例子，我删除了

ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

来自 CSS 文件并添加

ul#navbar li#menu_home a, ul#navbar li#menu_home a:hover {
    background-position:-75px -152px;
}

进入 index.html（在 SSI 之间）

【问题讨论】：

针对您的自我解决方案，您可以在不求助于!important 的情况下执行相同的操作。只需将选择器从ul#navbar li#menu_home a.current 更改为ul#navbar li#menu_home a.current, ul#navbar li#menu_home a.current:hover。这优于使用!important。它起作用的原因是ul#navbar li#menu_home a.current:hover 比之前的规则ul#navbar li#menu_home a:hover 更具体，所以它胜出。
谢谢。更新了解决方案以反映更改。

标签： html css class navbar ssi

【解决方案1】：

如果您使用的是“静态”服务器端包含，而不是像 PHP 这样的动态服务器端语言，那么最好的办法是查看突出当前页面的 JavaScript 方法。有很多可用的插件，具体取决于您使用的框架（例如 jQuery），或者如果您的要求很简单，您可以通过一些简单的正则表达式匹配来解决。

【讨论】：

我愿意使用任何东西。我已经安装了 PHP，如果您认为它更好，可以（弄清楚如何）使用它？
嗯，这取决于您的总体需求、您编写了多少代码、需要更改多少等。如果您研究 PHP，您应该查看许多组件库和构架。我个人喜欢 Symfony Components，它不是一个框架，所以它允许你随心所欲地编写代码，但提供了一些非常有用的类和工具，你可以从中挑选。这比 SSI 强大得多，但请注意，它也是您的技能要求的一步 :-)
感谢您的帮助，但我想出了一个解决方案。我已将其添加到问题中，直到我可以在 6 小时内自己回答为止。不过感谢您的帮助！
另外，在我在网站上做任何真正的 php 之前，我会研究一下 Symfony 组件，它看起来很有趣。我一定会在可能的时候投票，还没有足够的代表=P

【解决方案2】：

根据 leftclickbens 的建议对 index.html 中的代码进行了一些更改，以摆脱 !important

所以我想通了。对于上面的例子，我删除了

ul#navbar  li#menu_home a.current {
    background-position:-75px -152px;
}

来自 CSS 文件并添加

ul#navbar li#menu_home a, ul#navbar li#menu_home a:hover {
    background-position:-75px -152px;
}

进入 index.html（在 SSI 之间）

【讨论】：