Question

我是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;
}

当我将鼠标悬停在图像上时，它会更改为突出显示的图像，但是当我点击该链接时，该选项卡将恢复为正常图像。当用户当前在该页面上时，我希望它保持突出显示。谁能帮我这个？我尝试过“访问过”，但似乎无法正常工作，我在谷歌搜索中找到的所有内容都与我正在尝试的内容略有不同。

提前致谢。

Answer 1

有很多方法可以做到这一点。使用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);}

Answer 2

要回答具体问题，当用户点击链接时，他们会转到新页面。这些链接本身没有关于它们存在于哪个页面的概念。

所以你有几个选择。常见的解决方案是使用服务器端代码发送带有某些指示符的HTML，即当前链接。例如，您可以添加类似“当前”的类。此外，如果这是您所在的页面，也不需要链接，因此不应该链接该文本。

但是如果您无法访问服务器，则需要手动添加。您可以为.current创建新样式，然后在该页面上将该类应用于您的活动链接。

但是，也许您将此菜单作为包含...包含意味着每个页面的代码都相同。在这种情况下，您需要使用CSS定位活动链接。所以在每个页面上你都会在页面上有一个自定义的CSS。

例如，在提示页面上，您可以执行以下操作：

#tips {put your style here for active links}

为了获得更高级/更自动化，您可以编写一些javascript：

解析网址
找出页面的文件名
将该文件名与链接列表中的内容相匹配
动态地为您应用课程

PS。没有必要在CSS中使用a#tips的语法。原因是，如果您使用的是ID，则页面上只能有一个ID，因此a有点多余。

Answer 3

这个例子对我来说很好......

主页

<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>

Answer 4

使用CSS突出显示当前页面上的导航选项卡的一种方法是创建一个活动类，以附加到您当前使用的标签的类上。您的活动CSS类将详细说明您认为它处于活动状态时的外观。然后，根据您所位于的选项卡，为该选项卡插入active as类，如下所示。

`
<html>
<head>
  <title>Highlight Nav Tab of Page</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-    scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<style>
.navbar {
  background-color: purple;
  font-size: 12px !important;
  line-height: 1.42857143 !important;
}
.navbar li a, .navbar .navbar-brand {
  color: #fff !important;
}
.navbar-nav li a:hover, .navbar-nav li.active a {
  color: purple !important;
  background-color: #fff !important;
}
</style>
<body id="about.html" data-spy="scroll" data-target=".navbar" data-offset="60">
<!--navbar-->
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li ><a href="#">Home</a></li>
                <li class = "active"><a href="#">About</a></li>
                <li ><a href="#">More</a></li>
                <li ><a href="#">Contact Us</a></li> 
            </ul>
        </div>
        </div>
    </nav>
</body>
</html>
`

Image shows what nav highlight looks like

使用CSS突出显示当前页面上的导航选项卡？

4 个答案: