html - 使用 SSI 在 CSS 导航栏上“选择”按钮

Question

我在网站上工作，我正在使用 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 之间)

Answer 1

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