我如何制作单页导航？没有滚动，只有带有自己身体的导航仪

问题描述 投票：1回答：2

我已经在Internet上进行了搜索，但是似乎没有教导这些导航类型的教程。

我一直在尝试重新创建电影网站，作为练习，他们在其首页上有此https://gph.is/g/E1W3OQq。我在Internet上进行了搜索，但没有找到任何教程。我对javascript的了解几乎为空。

到目前为止，我已经完成了此https://jsfiddle.net/oViana_/gbtcLrmf/8/，并添加了我想在每个部分上使用的div。

  1. （（PS：不要介意这些海报，我只是搜索了“ [Seaction Name]海报”））
  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>
javascript html css single-page-application nav
2个回答
0
投票

链接“ href”将查找ID与其值匹配的元素。检查下面。 #Highlights将查找ID为“ 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>
0
投票

您只需要将此功能添加到您的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，并向其添加了一些新样式（因为它们具有的默认样式不同于链接所具有的默认样式）

然后确保所有ID都是唯一的，以便显示特定的标签。

然后向每个导航按钮添加以下属性：onclick="openTab('movies-seen')"。作为参数，您指定要显示的元素的ID。

您得到这个：

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')
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;
}

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

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

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

li.li-media-active button {
  background-color: #dbdbdb;
  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;
}

.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"><button onclick="openTab('movies-highlights')">Highlights</button></li>
      <li class="li-media"><button onclick="openTab('movies-seen')">Most seen</button></li>
      <li class="li-media"><button onclick="openTab('movies-recent')">Most recent added</button></li>
      <li class="li-media"><button onclick="openTab('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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.