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'中放置一些代码来将'current'类添加到给定的订单项？感谢您的帮助，对不起，如果它非常明显。如果您需要更多信息，请告诉我。

解决

由于我是新手，我再过几个小时无法回答我的问题，但这就是我要发布的内容：

编辑

在每个leftclickbens建议的代码中更改了一些代码，以摆脱！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），或者如果您的要求很简单，您可以使用一些简单的正则表达式匹配。

Answer 2

在每个leftclickbens建议的代码中更改了一些代码，以摆脱！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之间）

使用SSI在CSS Navbar上“选择”按钮

2 个答案: