2

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

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

到目前为止我所拥有的：

索引.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 之间）

4

2 回答 2

0

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

于 2013-02-03T06:00:44.080 回答
0

根据 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 之间）

于 2013-03-03T03:47:33.710 回答