是否使用CSS突出显示当前页面上的导航选项卡？
是否使用CSS突出显示当前页面上的导航选项卡？
提问于 2014-01-26 11:14:07
我是个html/css新手，所以请耐心听我说。我有一些特定的图像，我想将其用作导航菜单。我的html，css基本上看起来像这样：
HTML
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>CSS
a#main:
{
background-image:url(main-normal.png);
margin-right:0px;
}
a#main:hover:
{
background-image:url(main-highlight.png);
}
a#tips:
{
background-image:url(tips-normal.png);
margin-right:0px;
}
a#tips:hover:
{
background-image:url(tips-highlight.png);
}
a#news:
{
background-image:url(news-normal.png);
margin-right:0px;
}
a#news:hover:
{
background-image:url(news-highlight.png);
}
#main,#news,#tips
{
background-repeat:no-repeat;
display:block;
text-decoration:none;
text-indent:-30000px;
}当我将鼠标悬停在图像上时，它确实会更改为突出显示的图像，但当我单击链接时，选项卡将返回到正常图像。我希望它保持突出显示，当用户当前在该页面上。有人能帮我吗？我试着“访问”，但似乎不起作用，我在谷歌搜索上找到的所有东西都与我想要做的略有不同。
提前谢谢。
Stack Overflow用户
发布于 2014-01-26 11:26:06
为了回答特定的问题，当用户单击链接时，他们会被带到一个新页面。这些链接本身并没有关于它们存在于哪个页面上的概念。
所以你有几个选择。常见的解决方案是使用服务器端代码发送HTML，其中包含当前链接的一些指示符。例如，你可以添加一个像'current‘这样的类。此外，如果这是您所在的页面，也不需要链接，因此不应该有该文本的链接。
但是，如果您没有访问服务器的权限，则需要手动添加。您可以为.current创建一个新样式，然后在该页面上，将该类应用于活动链接。
但是，您可能会将此菜单包含为一个include...meaning。代码对于每个页面都是相同的。在这种情况下，您需要使用CSS来定位活动链接。因此，在每个页面上，您都会在页面上自定义一点CSS。
例如，在提示页面上，您可以这样做：
#tips {put your style here for active links}要获得更多的自动化程度，您可以编写一些javascript，它将：
- 解析URL
- 找出页面的文件名
- 将该文件名与链接列表中的内容进行匹配
- 为您动态应用类
<>F211
PS。在你的CSS中没有必要使用a#tips的语法。原因是，如果您使用的是id，那么页面上只能有一个id，因此a有点多余。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21359198
复制相关文章
相似问题
腾讯云开发者
