Как я могу создать ссылку на основе моей текущей страницы?

Question

Я сделал навигационную панель сверху экрана. Если я на определенной странице, скажем, «Контакт», я хочу, чтобы слово было выделено. Если я переключусь на «Главная», будет выделено слово «Главная» и т. Д. Мне разрешено использовать только 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; 
} 

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

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

Изменить нав идентификатор = PAGE3 для стр.3