Как сделать одностраничную навигацию? Нет прокрутки, просто навигация со своим телом

Question

Я искал по всему Inte rnet, но, похоже, нет учебных пособий, которые бы обучали этим типам навигации.

Я пытался воссоздать сайт mov ie как упражнение и на первой странице у них есть это https://gph.is/g/E1W3OQq. Я искал по всему Inte rnet, и я не нашел ни одного учебника. Мои знания о javascript почти равны нулю.

Я уже сделал это https://jsfiddle.net/oViana_/gbtcLrmf/8/ и добавил деления, которые я хочу, к go в каждом разделе.

1. (PS: не обращайте внимания на плакаты, я буквально только что искал "[Seaction Name] poster")
2. (PS: Кстати, я понятия не имею, почему навигация не ведет себя как навигация вверху, когда я изменяю размер страницы)

html {
  scroll-behavior: smooth;
}

body {
  background-color: #222222;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  margin-top: 4em;
  padding: 0;
}

ul.top {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #1d1d1d;
  font-weight: bold;
  text-align: center;
  cursor: default;
  user-select: none;
  font-size: 16px;
  opacity: 0.98;
  position: fixed;
  top: 0;
  z-index: 100;
 }

li.li-top {
  display: inline-block;
}

li.li-top a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  line-height: 3em;
  padding-left: 3em;
  padding-right: 3em;
}

li.li-top a:hover {
  background-color: #1a1a1a;
  transition: all ease-in-out 250ms;
  color: #dbdbdb;
}

li.li-top-active {
  display: inline-block;
  background-color: #ffffff;
}

li.li-top-active a {
  display: block;
  color: #000000;
  text-decoration: none;
  line-height: 3em;
  padding-left: 3em;
  padding-right: 3em;
}

li.li-top-active a:hover {
  background-color: #dbdbdb;
  transition: all ease-in-out 250ms;
}

.media-div {
  padding-bottom: 1.5em;
  user-select: none;
}

.media-title {
  text-align: center;
  line-height: 3em;
  margin-bottom: 2.5em;
  font-size: 20px;
}

.search-box {
  position: absolute;
  background-color: #ffffff;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 3em;
  border-radius: 3em;
  border-style: solid;
  border-color: #000000;
  padding: 0;
  margin-top: -2.2em;
}

.search-btn {
  color: #000000;
  float: right;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: static;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  padding-left: 1em;
  color: #000000;
  font-size: 17px;
  transition: all ease-in-out 250ms;
  line-height: 3em;
  width: 25em;
  float: left;
}

ul.media {
  display: block;
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  width: 75em;
  background-color: #ffffff;
  font-weight: bold;
  text-align: center;
  cursor: default;
  user-select: none;
  border: none;
  font-size: 16px;
 }

li.li-media {
  display: inline-block;
}

li.li-media a {
  display: block;
  color: #000000;
  text-decoration: none;
  line-height: 3em;
  padding-left: 3em;
  padding-right: 3em;
}

li.li-media a:hover {
  background-color: #dbdbdb;
  transition: all ease-in-out 250ms;
}

li.li-media a:active {
  background-color: #dbdbdb;
}

li.li-media-active {
  display: inline-block;
}

li.li-media-active a {
  background-color: #dbdbdb;
  display: block;
  color: #000000;
  text-decoration: none;
  line-height: 3em;
  padding-left: 3em;
  padding-right: 3em;
}

.content-media {
  width: 75em;
  background-color: #dbdbdb;
  margin: 0 auto;
  margin-bottom: 1em;
}

.content-media-padding {
  padding-bottom: 1em;
  display: inline-block;
  text-align: center;
}

.img {
  height: 18em;
  width: 12em;
}

.img-container {
  height: 18em;
  width: 12em;
  padding: 1em;
  transition: all ease-in-out 100ms;
  display: inline-block;
}

.img-container:hover {
  transform: scale(1.02);
  cursor: pointer;
}

.content-title {
  width: 12em;
  height: 2.5em;
  background-color: #1d1d1d;
  color: #ffffff;
  text-align: center;
  line-height: 2.5em;
  margin-top: -0.3em;
  cursor: pointer;
  transition: all ease-in-out 250ms;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

.content-title-padding {
  margin-left: 1em;
  margin-right: 1em;
}

figcaption a {
  text-decoration: none;
  color: #ffffff;
}

figcaption a:hover {
  text-decoration: none;
  color: #dbdbdb;
}

.content-title:hover {
  background-color: #1a1a1a;
}

.footer-title {
  user-select: none;
  color: #ffffff;
  text-align: center;
  line-height: 3em;
  width: 5em;
  font-size: 20px;
  margin-bottom: -6em;
  text-decoration: none;
  display: inline-block;
}

.footer-txt {
  user-select: none;
  color: #ffffff;
  text-align: center;
  line-height: 1em;
  margin-bottom: -5em;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
}

.footer {
  user-select: none;
  background-color: #1d1d1d;
  width: 100%;
  text-align: center;
  padding-bottom: 3em;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Site</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/74494548e4.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <ul class="top">
      <li class="li-top-active"><a href="#">Home</a></li>
      <li class="li-top"><a href="#">Movies</a></li>
      <li class="li-top"><a href="#">Series</a></li>
      <li class="li-top"><a href="#">Animes</a></li>
      <li class="li-top"><a href="#">Help</a></li>
    </ul>
  <div class="media-div">
    <ul class="media">
      <h1 class="media-title">Movies</h1>
      <div class="search-box">
        <input class="search-txt" type="text" placeholder="Search here a movie">
        <a href="#" class="search-btn">
          <i class="fas fa-search"></i>
        </a>
      </div>
      <li class="li-media-active"><a href="#">Highlights</a></li>
      <li class="li-media"><a href="#">Most seen</a></li>
      <li class="li-media"><a href="#">Most recent added</a></li>
      <li class="li-media"><a href="#">Most rated</a></li>
    </ul>
    <div class="content-media" id="movies-highlights">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Highlights">
            <img  src="https://mischalke04.files.wordpress.com/2010/06/the-highlights-poster.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Highlights</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="movies-highlights">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most seen">
            <img  src="https://i.pinimg.com/originals/31/22/ea/3122ea91ff43732c50c9fa8c5761271f.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Most seen</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="movies-highlights">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most recent added">
            <img  src="https://i.pinimg.com/originals/6e/66/03/6e6603be280359c8a62e0f2f498242ea.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Most recent added</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="movies-highlights">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most rated">
            <img  src="https://d13ezvd6yrslxm.cloudfront.net/wp/wp-content/images/TFINYR-Poster-700x999.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Most rated</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
  </div>
    <div class="footer">
      <h1 class="footer-title">Help</h1>
      <br>
      <a href="#"><h1 class="footer-txt">Contact</h1></a>
      <br>
      <a href="#"><h1 class="footer-txt">Terms of service</h1></a>
    </div>
  </body>
</html>

Answer 1

Вам просто нужно добавить эту функцию в свои js файлы проекта

function openTab(tabName) {
  var i;
  var x = document.getElementsByClassName("content-media");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(tabName).style.display = "block";  
}

openTab('movies-highlights')

Эта функция, когда она вызывается, скрывает все вкладки и отображает только нужную, используя атрибут id

Затем вы меняете навигационные элементы со ссылок a на обычные кнопки button и добавляете к ним несколько новых стилей (потому что у них разные стили по умолчанию, чем у ссылок)

Затем убедитесь, что все ваши идентификаторы уникальны для того, чтобы отобразить указанную вкладку c.

И затем к каждой навигационной кнопке вы добавляете следующий атрибут: data-open="movies-highlights". В качестве аргумента вы указываете идентификатор элемента, который хотите показать.

И вы получаете это:

function openTab(tabName) {
  var i;
  var x = document.getElementsByClassName("content-media");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";  
  }
  document.getElementById(tabName).style.display = "block";
}

openTab('movies-highlights')

// the following is used to make tabs active when click on them

let navButtons = document.querySelectorAll('button[data-open]')

navButtons.forEach((elem) => {
  elem.addEventListener("click", (e) => {
    for (var i = 0; i < navButtons.length; i++) {
      navButtons[i].classList.remove('active')
    }
    
    e.target.classList.add('active')
    
    openTab(e.target.getAttribute('data-open'))
  })
})

html {
  scroll-behavior: smooth;
}

body {
  background-color: #222222;
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  margin-top: 4em;
  padding: 0;
}

ul.top {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #1d1d1d;
  font-weight: bold;
  text-align: center;
  cursor: default;
  user-select: none;
  font-size: 16px;
  opacity: 0.98;
  position: fixed;
  top: 0;
  z-index: 100;
 }

li.li-top {
  display: inline-block;
}

li.li-top a {
  display: block;
  color: #ffffff;
  text-decoration: none;
  line-height: 3em;
  padding-left: 3em;
  padding-right: 3em;
}

li.li-top a:hover {
  background-color: #1a1a1a;
  transition: all ease-in-out 250ms;
  color: #dbdbdb;
}

li.li-top-active {
  display: inline-block;
  background-color: #ffffff;
}

li.li-top-active a {
  display: block;
  color: #000000;
  text-decoration: none;
  line-height: 3em;
  padding-left: 3em;
  padding-right: 3em;
}

li.li-top-active a:hover {
  background-color: #dbdbdb;
  transition: all ease-in-out 250ms;
}

.media-div {
  padding-bottom: 1.5em;
  user-select: none;
}

.media-title {
  text-align: center;
  line-height: 3em;
  margin-bottom: 2.5em;
  font-size: 20px;
}

.search-box {
  position: absolute;
  background-color: #ffffff;
  left: 50%;
  transform: translate(-50%,-50%);
  height: 3em;
  border-radius: 3em;
  border-style: solid;
  border-color: #000000;
  padding: 0;
  margin-top: -2.2em;
}

.search-btn {
  color: #000000;
  float: right;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  position: static;
}

.search-txt {
  border: none;
  background: none;
  outline: none;
  padding: 0;
  padding-left: 1em;
  color: #000000;
  font-size: 17px;
  transition: all ease-in-out 250ms;
  line-height: 3em;
  width: 25em;
  float: left;
}

ul.media {
   list-style-type: none;
   margin: 0 auto;
   padding: 0;
   width: 75em;
   background-color: #ffffff;
   font-weight: bold;
   text-align: center;
   cursor: default;
   user-select: none;
   border: none;
   font-size: 16px;
 }

li.li-media {
  display: inline-block;
}

li.li-media button {
  display: block;
  color: #000000;
  text-decoration: none;
  line-height: 3em;
  padding-left: 3em;
  padding-right: 3em;
  border: 0;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  font-size: 15px;
  transition: all 200ms ease-in-out;
}

li.li-media button:hover {
  background: #dbdbdb!important;
  transition: all ease-in-out 250ms;
}

li.li-media button:active {
  background-color: #dbdbdb;
}

// styles for active nav item
button[data-open].active {
  background-color: #999999;
}
button[data-open].active:hover {
  background-color: #999999 !important;
}



.content-media {
  width: 75em;
  background-color: #dbdbdb;
  margin: 0 auto;
  margin-bottom: 1em;
}

.content-media-padding {
  padding-bottom: 1em;
  display: inline-block;
  text-align: center;
}

.img {
  height: 18em;
  width: 12em;
}

.img-container {
  height: 18em;
  width: 12em;
  padding: 1em;
  transition: all ease-in-out 100ms;
  display: inline-block;
}

.img-container:hover {
  transform: scale(1.02);
  cursor: pointer;
}

.content-title {
  width: 12em;
  height: 2.5em;
  background-color: #1d1d1d;
  color: #ffffff;
  text-align: center;
  line-height: 2.5em;
  margin-top: -0.3em;
  cursor: pointer;
  transition: all ease-in-out 250ms;
  text-overflow: ellipsis;
  overflow: hidden;
  display: inline-block;
}

.content-title-padding {
  margin-left: 1em;
  margin-right: 1em;
}

figcaption a {
  text-decoration: none;
  color: #ffffff;
}

figcaption a:hover {
  text-decoration: none;
  color: #dbdbdb;
}

.content-title:hover {
  background-color: #1a1a1a;
}

.footer-title {
  user-select: none;
  color: #ffffff;
  text-align: center;
  line-height: 3em;
  width: 5em;
  font-size: 20px;
  margin-bottom: -6em;
  text-decoration: none;
  display: inline-block;
}

.footer-txt {
  user-select: none;
  color: #ffffff;
  text-align: center;
  line-height: 1em;
  margin-bottom: -5em;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  display: inline-block;
}

.footer {
  user-select: none;
  background-color: #1d1d1d;
  width: 100%;
  text-align: center;
  padding-bottom: 3em;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Site</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/74494548e4.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <ul class="top">
      <li class="li-top-active"><a href="#">Home</a></li>
      <li class="li-top"><a href="#">Movies</a></li>
      <li class="li-top"><a href="#">Series</a></li>
      <li class="li-top"><a href="#">Animes</a></li>
      <li class="li-top"><a href="#">Help</a></li>
    </ul>
  <div class="media-div">
    <ul class="media">
      <h1 class="media-title">Movies</h1>
      <div class="search-box">
        <input class="search-txt" type="text" placeholder="Search here a movie">
        <a href="#" class="search-btn">
          <i class="fas fa-search"></i>
        </a>
      </div>
      <li class="li-media"><button data-open="movies-highlights" class="active">Highlights</button></li>
      <li class="li-media"><button data-open="movies-seen">Most seen</button></li>
      <li class="li-media"><button data-open="movies-recent">Most recent added</button></li>
      <li class="li-media"><button data-open="movies-rated">Most rated</button></li>
    </ul>
    <div class="content-media" id="movies-highlights">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Highlights">
            <img  src="https://mischalke04.files.wordpress.com/2010/06/the-highlights-poster.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Highlights</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="movies-seen">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most seen">
            <img  src="https://i.pinimg.com/originals/31/22/ea/3122ea91ff43732c50c9fa8c5761271f.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Most seen</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="movies-recent">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most recent added">
            <img  src="https://i.pinimg.com/originals/6e/66/03/6e6603be280359c8a62e0f2f498242ea.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Most recent added</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="movies-rated">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most rated">
            <img  src="https://d13ezvd6yrslxm.cloudfront.net/wp/wp-content/images/TFINYR-Poster-700x999.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Most rated</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
  </div>
    <div class="footer">
      <h1 class="footer-title">Help</h1>
      <br>
      <a href="#"><h1 class="footer-txt">Contact</h1></a>
      <br>
      <a href="#"><h1 class="footer-txt">Terms of service</h1></a>
    </div>
  </body>
</html>

Answer 2

Ссылка "href" будет искать элемент с идентификатором, который соответствует его значению. Проверьте ниже. # Highlights будет искать элемент с идентификатором «Highlights»

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Site</title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/74494548e4.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <ul class="top">
      <li class="li-top-active"><a href="#">Home</a></li>
      <li class="li-top"><a href="#">Movies</a></li>
      <li class="li-top"><a href="#">Series</a></li>
      <li class="li-top"><a href="#">Animes</a></li>
      <li class="li-top"><a href="#">Help</a></li>
    </ul>
  <div class="media-div">
    <ul class="media">
      <h1 class="media-title">Movies</h1>
      <div class="search-box">
        <input class="search-txt" type="text" placeholder="Search here a movie">
        <a href="#" class="search-btn">
          <i class="fas fa-search"></i>
        </a>
      </div>
      <li class="li-media-active"><a href="#Highlights">Highlights</a></li>
      <li class="li-media"><a href="#MostSeen">Most seen</a></li>
      <li class="li-media"><a href="#MostRecentAdded">Most recent added</a></li>
      <li class="li-media"><a href="#MostRated">Most rated</a></li>
    </ul>
    <div class="content-media" id="Highlights">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Highlights">
            <img  src="https://mischalke04.files.wordpress.com/2010/06/the-highlights-poster.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Highlights</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="MostSeen">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most seen">
            <img  src="https://i.pinimg.com/originals/31/22/ea/3122ea91ff43732c50c9fa8c5761271f.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="">Most seen</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="MostRecentAdded">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most recent added">
            <img  src="https://i.pinimg.com/originals/6e/66/03/6e6603be280359c8a62e0f2f498242ea.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Most recent added</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
    <div class="content-media" id="MostRated">
      <div class="content-media-padding"
        <a>
          <div class="img-container" title="Most rated">
            <img  src="https://d13ezvd6yrslxm.cloudfront.net/wp/wp-content/images/TFINYR-Poster-700x999.jpg" class="img">
            <figcaption class="content-title">
              <div class="content-title-padding"
                <a href="#">Most rated</a>
              </div>
            </figcaption>
          </div>
        </a>
      </div>
    </div>
  </div>
    <div class="footer">
      <h1 class="footer-title">Help</h1>
      <br>
      <a href="#"><h1 class="footer-txt">Contact</h1></a>
      <br>
      <a href="#"><h1 class="footer-txt">Terms of service</h1></a>
    </div>
  </body>
</html>