Как сделать так, чтобы открытая ссылка показывала, что она выбрана - PullRequest
Новая
       0

Как сделать так, чтобы открытая ссылка показывала, что она выбрана

1 голос
/ 19 июня 2020

Я работаю над веб-сайтом и хочу, чтобы кнопки моей панели навигации отображались, когда они выбраны. Я добавил функцию наведения, которая работает, но я хочу, чтобы она оставалась такой при открытии ссылки. Вот что у меня есть прямо сейчас.

HTML: 

...<body>
<header>
    <div class="main">
        <div class="logo-text">
            <h1 class="text-logo">Title</h1>
        </div>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="store.html">Store</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact Us</a></li>
            </ul>
        </nav>
    </div>
</header>

CSS: 

 ul {
 list-style-type: none;
 text-align: center;
 margin-top: -3.7%;
 }
 ul li {
 display: inline-block;
 margin-left: 0%;
 font-size: 170%;
 }

 ul li a {
 transition: 0.6s ease;
 text-decoration: none;
 color: #000000;
 padding: 5px 40px;
 border: 2px solid #000000;
 font-weight: 700;
 }

 ul li a:hover {
 background-color: #000000;
 color: #ffffff;
 }

 ul li a:visited {
 background-color: #000000;
 color: #ffffff;
 }

Что я могу добавить или улучшить? Заранее спасибо!

Ответы [ 2 ]

1 голос
/ 19 июня 2020

Создайте активный класс и соответственно используйте его на своих страницах 

ul li a:hover,
.active {
  background-color: #000000;
  color: #ffffff;
}

<li><a href="index.html" class="active">Home</a></li>


ul {
  list-style-type: none;
  text-align: center;
  margin-top: -3.7%;
}

ul li {
  display: inline-block;
  margin-left: 0%;
  font-size: 170%;
}

ul li a {
  transition: 0.6s ease;
  text-decoration: none;
  color: #000000;
  padding: 5px 40px;
  border: 2px solid #000000;
  font-weight: 700;
}

ul li a:hover,
.active {
  background-color: #000000;
  color: #ffffff;
}

ul li a:visited {
  background-color: #000000;
  color: #ffffff;
}
<header>
  <div class="main">
    <div class="logo-text">
      <h1 class="text-logo">Title</h1>
    </div>
    <nav>
      <ul>
        <li><a href="index.html" class="active">Home</a></li>
        <li><a href="store.html">Store</a></li>
        <li><a href="about.html">About</a></li>
      </ul>
    </nav>
  </div>
</header>
0 голосов
/ 19 июня 2020

Я бы добавил новый класс и назвал его примерно как .currentPage. Теперь на каждой из ваших страниц вы должны присвоить текущему элементу li класс currentPage.

Например, для index. html первому li нужен класс.

Затем настройте этот класс.

Нет селектора, который мог бы выбрать вашу текущую страницу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...