несколько страниц в одном html файле без фиксированной навигации на каждой странице

Question

На главной странице будет только несколько кнопок, которые будут отображать пользовательский контент.

Эти кнопки в #home не находятся в заголовке, поэтому кнопки будут отображаться только на #home.

<section id="home">
  <a href="#content">content</a>
  <a href="#something">something</a>
  <a href="#someelse">someelse</a>
</section>
<section id="content">
<section id="something">
<section id="someelse">

Я нашел :target метод на css, который кажется очень простым в использовании и работает нормально, но #home не отображается. Кажется, что это будет работать только тогда, когда у меня есть фиксированный заголовок за пределами section

section {
  display: none;
}
section:target {
  display: block;
}

В каждом разделе, кроме #home, будет кнопка возврата, которая также отправит пользователя на #home. Это был довольно простой метод :target, потому что я только что использовал a href="#", и он работал.

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

Answer 1

Я не могу придумать никаких чистых CSS способов сделать это, но это легко сделать с помощью небольшого JavaScript, чтобы проверить, пусто ли ха sh, а затем показать #home и скрыть это когда есть значение.

window.onhashchange = checkHash;

checkHash();

function checkHash() {
  var home = document.getElementById('home');

  //Check if the hash is empty
  if (window.location.hash.substring(1) == '') {
    home.style.display = 'block';
  } else {
    home.style.display = 'none';
  }
}

.section {
  display: none;
}

.section:target {
  display: block !important;
}

<div id="home" class="section">
  <a href="#content">Content</a>
  <a href="#somthingElse">Somthing Else</a>
  <h3>Home</h3>
</div>
<div id="content" class="section">
  <a href="#home">Home</a>
  <h3>Content</h3>
</div>
<div id="somthingElse" class="section">
  <a href="#home">Home</a>
  <h3>Somthing Else</h3>
</div>

Fade

Я использовал position: absolute, поэтому они будут накладываться друг на друга. z-index: -1 сохранит все остальные разделы в открытом виде, чтобы предотвратить наложение событий указателя. opacity: 0 явно использовался для затухания.

Я изменил скрипт JS, чтобы упростить мой CSS. Теперь, когда вы go на example.com/html.html, вы будете перенаправлены на example.com/html.html#home (без изменения истории для кнопки назад).

window.onhashchange = checkHash;

checkHash();

function checkHash() {
  //Check if the hash is empty
  if (window.location.hash.substring(1) == '') {
    history.replaceState(undefined, undefined, "#home")
  }
}

.section {
  position: absolute;
  z-index: -1;
  
  opacity: 0;
  
  transition: opacity 0.5s;  
}

.section:target {
  z-index: 1;

  opacity: 1;
}

<div id="home" class="section">
  <a href="#content">Content</a>
  <a href="#somthingElse">Somthing Else</a>
  <h3>Home</h3>
</div>
<div id="content" class="section">
  <a href="#home">Home</a>
  <h3>Content</h3>
</div>
<div id="somthingElse" class="section">
  <a href="#home">Home</a>
  <h3>Somthing Else</h3>
</div>