是否使用CSS突出显示当前页面上的导航选项卡？
我是个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;
}当我将鼠标悬停在图像上时，它确实会更改为突出显示的图像，但当我单击链接时，选项卡将返回到正常图像。我希望它保持突出显示，当用户当前在该页面上。有人能帮我吗？我试着“访问”，但似乎不起作用，我在谷歌搜索上找到的所有东西都与我想要做的略有不同。
提前谢谢。
回答 4
Stack Overflow用户
发布于 2014-01-26 11:25:55
有很多方法可以做到这一点。与PHP，JavaScript或纯CSS与一些额外的标记。
既然你说你是HTML/CSS的新手，我认为CSS方式最适合你？
所以你有3个页面和完全相同的菜单代码？把这个放到每个站点上就行了：
对于您的主页：
<div id="navigation">
<a id="main" class="active" 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>您的提示页面：
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" class="active" href="domain.com/tips">tips</a>
<a id="news" href="domain.com/news">news</a>
</div>你的新闻页面：
<div id="navigation">
<a id="main" href="domain.com/main">main</a>
<a id="tips" href="domain.com/tips">tips</a>
<a id="news" class="active" href="domain.com/news">news</a>
</div>添加CSS：
#main.active {background-image:url(main-highlight.png);}
#tips.active {background-image:url(tips-highlight.png);}
#news.active {background-image:url(news-highlight.png);}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用户
发布于 2015-03-20 11:43:59
这个例子对我来说很好……
主页
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
</head>
<body id="home">
<nav>
<ul>
<li><a href="nav.html" id="homenav">Home</a></li>
<li><a href="nav2.html" id="secondnav">Second</a></li>
</ul>
</nav>
</body>
第二页
<html>
<head>
<title>Second</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body#home a#homenav, body#second a#secondnav {
color: #f8f8f8;
background: #D34;
cursor: default;
}
</style>
<body id="second">
<nav>
<ul>
<li><a href="nav.html" id="homenav">Home</a></li>
<li><a href="nav2.html" id="secondnav">Second</a></li>
</ul>
</nav>
</body>
https://stackoverflow.com/questions/21359198
复制相似问题
腾讯云开发者
