Question

所以我希望在我的导航中当前页面有下划线和红色。红色框ix我的当前页面，如果我将页面更改为例如：页面需要红色/下划线。我试图放入codepen.io坏从不使用它，所以没有工作。 Example

My code:

    HTML
    <div class="full-header">
          <div class="header">
              <div class="nav">
                  <ul>
                      <li><a href="index.html">Home</a></li>
                      <li><a href="#">Work</a></li>
                      <li><a href="#">About Me</a></li>
                      <li><a href="#">Contact</a></li>
                  </ul>
              </div>
          </div>
             <p class="header-text">May I introduce my self?</p>
             <hr class="line">
             <h2 class="header-text-small">front End Developer</h2>
             <div class="button">Aphryv</div>
        </div>

    CSS

    .full-header {
        width: 100%;
        height: 500px;
        background: url(img/header-bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

    .header {
        width: 75%;
        height: 60px;
        margin: 0 auto;
        /*background: rgba(0, 0, 0, 0.45);*/
    }

    .nav {
        text-align: right;
    }

    .nav ul {

    }

    .nav ul li {
        display: inline;
        padding: 20px 10px;
        line-height: 55px;
    }

    .nav ul li a {
        text-decoration: none;
        color: #fff;
        font-family: 'Arial', sans-serif;
        font-size: 24px;
    }

    .nav ul li a:hover {
        color: red;
    }

Answer 1

对于大型网站，Javascript是最佳解决方案。

但是，对于只有几页的小型网站，则存在HTML / CSS解决方案。

如果这是您的菜单

<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Work</a></li>
<li><a href="#">About Me</a></li>
<li><a href="#">Contact</a></li>
</ul>

然后，每个页面上的所有必要是为应用于该页面的列表项（或链接）分配一个类别，例如“当前”。

所以对于“工作”页面：

<ul> <li><a href="index.html">Home</a></li> <li class="current"><a href="#">Work</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact</a></li> </ul>

那么你的CSS就是。

li.current a { color:red; text-decoraton:underline; }

Answer 2

在每个页面的body标签中添加一个简单的类，例如：

<body class="navMain">
<body class="navWork">
<body class="navAboutme">
<body class="navContact">

然后为每个链接添加另一个类：

<li><a href="index.html" class="highMain">Home</a></li>
<li><a href="#" class="highWork">Work</a></li>
<li><a href="#" class="highAboutme">About Me</a></li>
<li><a href="#" class="highContact">Contact</a></li>

最后写一些针对每个链接的CSS，只有当用户在同一页面上时才会这样：

.navMain .highMain .nav ul li, .navWork .highWork .nav ul li, .navAboutme .highAboutme .nav ul li, .navContact .highContact .nav ul li {border: 1px solid red;}

我已经详细阐述了CSS供您理解。

希望这有帮助

如何使用：hover和.active创建导航

2 个答案: