Question

我在屏幕顶部制作了一个导航栏。如果我在特定页面上，请说“联系”，我希望突出显示该单词。如果我切换到“Home”，则会突出显示“Home”字样，依此类推。我只允许使用CSS和HTML。

body {
    background: black;
}

nav {
    padding:0;
    right:1vw;
    margin: 0 0 0px 0;
    position: fixed;
    top: 0vh;
    text-align:center;
    background-color:rgba(255, 255, 255, 0.4);
    width:98%;
    -moz-border-radius: 15px;
    border-radius: 15px;
}

nav li {
    top:2vh;
    font-family:Verdana, Geneva, sans-serif;
    font-size: 13pt;
    display: inline-block;
    margin-left:2vw;
    margin-right:2vw;
    margin-bottom:2vh;
    margin-top:2vh;
}

nav li a {
    white-space: nowrap;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 1px 1px 2px rgba(71, 80, 23, 0.3);
    color: #fff;
    padding: 0;
    letter-spacing: 1px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    -ms-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-align:center;
}

nav:hover li a {
}

nav li a:hover {
    background: transparent;
    text-shadow: 0px 0px 20px #cc9900;
    color: #ffff99;
}

<nav>
    <li><a href="/index.html">Home</a></li>
    <li><a href="/dedump.html">De dump</a></li>
    <li><a href="/opdrachten.html">Opdrachten</a></li>
    <li><a href="/groepsopdracht.html">Groepsopdracht</a></li>
    <li><a href="/overmij.html">Over mij</a></li>
    <li><a href="/contact.html">Contact</a></li>
</nav>

Answer 1

使用以下代码。相应地改变它

a:link, a:visited {
     display: block;
     width: 175px;
     font-weight: bold;
     color: #FFFFFF;
     background-color: #00BFFF;
     text-align: center;
     padding: 4px;
     text-decoration: none;
     text-transform: uppercase;
  }

a:hover, a:active {
     background-color: #0066FF;
 }

Answer 2

如果您在主页，则可以为<li>添加一个类，例如<li class="active"><a href="/index.html" style="text-decoration:none">Home</a></li>。

同样，如果你在De Dump页面，那么<li>应该是

<li class="active"><a href="/dedump.html" style="text-decoration:none">De dump</a></li>

执行此操作后，您可以在CSS中添加类似

的样式

.active{
color:red;
}

Answer 3

您可以在每个页面上设置相关列表项的样式，例如在“Opdrachten”页面上默认设置相应列表项的样式：

nav li:nth-child(3) a{
    background:yellow;
    box-shadow:0 0 4px red;
    border-radius:4px;
}

<nav>
    <li><a href="/index.html" style="text-decoration:none">Home</a></li>
    <li><a href="/dedump.html" style="text-decoration:none">De dump</a></li>
    <li><a href="/opdrachten.html" style="text-decoration:none">Opdrachten</a></li>
    <li><a href="/groepsopdracht.html" style="text-decoration:none">Groepsopdracht</a></li>
    <li><a href="/overmij.html" style="text-decoration:none">Over mij</a></li>
    <li><a href="/contact.html" style="text-decoration:none">Contact</a></li>
</nav>

Answer 4

CSS

nav ul li {
    background-color: #000000;
}

#page1 ul li.page1 {
    background-color: #FFFFFF;
}

#page2 ul li.page2 {
    background-color: #FFFFFF;
}

#page3 ul li.page3 {
    background-color: #FFFFFF;
}

第1页HTML

<nav id="page1">
    <ul>
         <li class="page1"><a href="page1.html">Page 1</a></li>
         <li class="page2"><a href="page2.html">Page 2</a></li>
         <li class="page3"><a href="page3.html">Page 3</a></li>
    </ul>
</nav>

第2页HTML

<nav id="page2">
    <ul>
        <li class="page1"><a href="page1.html">Page 1</a></li>
        <li class="page2"><a href="page2.html">Page 2</a></li>
        <li class="page3"><a href="page3.html">Page 3</a></li>
    </ul>
</nav>

将导航ID更改为第3页的= page3

如何根据当前页面设置链接样式？

4 个答案: