Как сделать активную ссылку, используя только одну страницу и якорь (#)

Когда у вас есть #some-value, вы можете получить к нему доступ, используя CSS на этом ID используя псевдо-селектор :target. Хорошим примером будет:

a:target {background: red;}

<a href="#one" id="one">One</a>
<a href="#two" id="two">Two</a>
<a href="#three" id="three">Three</a>

Сделайте свое меню в переключатели, а затем поставьте метки привязки внутри переключателей. Использовать :checked для стилизации текущей выбранной ссылки.

Я не проверял это, и у меня не будет времени до тех пор, пока позже, но я предсказываю, что распространение рекламы может быть препятствием.

Там нет реального чистого решения CSS, которое поддерживает ваш описанный вариант использования. Самое близкое, что нужно было бы использовать :visited но это будет стиль всех якорей, которые были соблюдены, а не только активный фрагмент.

a:visited { color: red; }

<a href="#foo">Foo</a>
<a href="#bar">Bar</a>

<p></p>
<p></p>
<p></p>
<p id="foo">Foo</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p id="bar">Bar</p>

Вам нужно будет использовать какой-то JavaScript для достижения того, чего вы хотите:

// delegate all click events to this handler...
document.addEventListener('click', function(e) {
  
  // ...we only care about clicks on 'a' elements
  if (e.target.tagName.toLowerCase() === 'a') {

    // remove all applied '.active' classes
    Array.prototype.forEach.call(document.querySelectorAll('.active'), function(el) {
      el.classList.remove('active');
    });
    
    // add an '.active' class to style the anchor
    e.target.classList.add('active');  
  }
});

.active { color: red; }

<a href="#foo">Foo</a>
<a href="#bar">Bar</a>

<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p id="foo">Foo</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p>.</p>
<p id="bar">Bar</p>

Обратите внимание, что этот пример фактически не проверяет, соответствует ли фрагмент документа вашему якорю href, и не будет ли он окрашивать вашу ссылку, если вы хотите напрямую просмотреть фрагмент.