Обновление состояния HTML Wrapper на основе текущей страницы - PullRequest
Новая
       10

Обновление состояния HTML Wrapper на основе текущей страницы

0 голосов
/ 22 февраля 2019

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

Примером этого может быть переполнение стека и переход на страницу «Задания»он перенаправит вас на stackoverflow.com/jobs, и эта ссылка будет выделена / нажата.

Насколько я понимаю, способ, которым я реализовал оболочку, - это использование контейнеров. 

<!-- Wrapper -->
  <div id="wrapper">
    <!-- Header -->
    <header id="header">
      <h1><a href="index.html">myname</a></h1>

        <nav class="links">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </nav>
     .
     .
     .

Мой проект - готовая тема SASS с файлом _wrapper.scss.Я не собираюсь редактировать этот файл, так как не думаю, что я вполне готов научиться компилировать файлы SASS и конвертировать их в CSS, но есть ли альтернативный способ получить желаемый результат?

Я знаком с событиями onmouseover и onmouseout, но есть ли событие, которого я хочу достичь?

Спасибо!

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Я считаю, что вы ищете: посещенный селектор.Создайте файл CSS и сделайте следующее: 

 a:visited{
    color:black
}
<!-- Wrapper -->
  <div id="wrapper">
    <!-- Header -->
    <header id="header">
      <h1><a href="index.html">myname</a></h1>

        <nav class="links">
          <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="resume.html">Resume</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </nav>
0 голосов
/ 22 февраля 2019

Для начала определите класс CSS, который можно назначить элементу li, чтобы изменить его внешний вид, чтобы показать, что он нажат например, 

li.pressed { font-weight: bold; }

Затем вам нужен способприменить этот класс к правильному элементу li на основе загруженной страницы.Если вы просто вырезаете и вставляете навигацию на каждой странице, вы можете сделать это вручную, например 

<li class="pressed"><a href="resume.html">Resume</a></li>

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

Используемый сценарий может быть запущен на клиенте или сервере.То, как вы можете получить правильное значение для вашего параметра, будет зависеть от того, где работает ваш скрипт.

Сценарий на стороне сервера будет использовать информацию в запросе HTTP для страницы, чтобы соответствовать href для нажата кнопка .

Сценарий на стороне клиента будет использовать свойство window.location, а затем потребуется найти соответствующий href для кнопки нажата .

...