我在网站上工作,我正在使用 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 之间)
最佳答案
如果您使用的是“静态”服务器端包含,而不是像 PHP 这样的动态服务器端语言,那么最好的办法是查看突出显示当前页面的 JavaScript 方法。有很多可用的插件,具体取决于您使用的框架(例如 jQuery),或者如果您的要求很简单,您可以使用一些简单的正则表达式匹配。
关于html - 使用 SSI 在 CSS 导航栏上“选择”按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14669807/