首页猿问如何制作单页导航？没有滚动，只是一...

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

JavaScript

守着一只汪 2022-06-09 10:54:49

我在整个互联网上进行了搜索，但似乎没有任何教程可以教授这些类型的导航。我一直在尝试重新创建一个电影网站作为练习，在他们的首页上，他们有这个https://gph.is/g/E1W3OQq。我在互联网上搜索了所有内容，但没有找到一个教程。我对javascript的了解几乎为零。到目前为止，我已经完成了这个https://jsfiddle.net/oViana_/gbtcLrmf/8/并添加了我想在每个部分中进行的 div。（PS：不要介意海报，我只是搜索了“[Seaction Name]海报”）（PS：顺便说一句，我不知道为什么当我调整页面大小时导航的行为不像顶部的导航）

查看完整描述

2 回答

慕工程0101907

TA贡献1887条经验获得超5个赞

链接“href”将查找具有与其值匹配的 id 的元素。检查下面。#Highlights 将查找 id 为“Highlights”的元素

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<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>

</ul>

<h1 class="media-title">Movies</h1>

</a>

</div>

<li class="li-media-active"><a href="#Highlights">Highlights</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-padding"

<a>

<div class="content-title-padding"

<a href="#">Highlights</a>

</div>

</figcaption>

</div>

</a>

</div>

<div class="content-media-padding"

<a>

<div class="content-title-padding"

</div>

</figcaption>

</div>

</a>

</div>

<div class="content-media-padding"

<a>

<div class="content-title-padding"

<a href="#">Most recent added</a>

</div>

</figcaption>

</div>

</a>

</div>

<div class="content-media-padding"

<a>

<div class="content-title-padding"

<a href="#">Most rated</a>

</div>

</figcaption>

</div>

</a>

</div>

<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>

反对回复 2022-06-09

慕森卡

TA贡献1806条经验获得超8个赞

你只需要将这个函数添加到你的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 都是唯一的，以便显示特定的选项卡。

然后为每个导航按钮添加以下属性：data-open="movies-highlights". 作为参数，您指定要显示的元素的 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')

// 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>

</head>

<body>

<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>

</ul>

<h1 class="media-title">Movies</h1>

</a>

</div>

<li class="li-media"><button data-open="movies-highlights" class="active">Highlights</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-padding"

<a>

<div class="content-title-padding"

<a href="#">Highlights</a>

</div>

</figcaption>

</div>

</a>

</div>

<div class="content-media-padding"

<a>

<div class="content-title-padding"

</div>

</figcaption>

</div>

</a>

</div>

<div class="content-media-padding"

<a>

<div class="content-title-padding"

<a href="#">Most recent added</a>

</div>

</figcaption>

</div>

</a>

</div>

<div class="content-media-padding"

<a>

<div class="content-title-padding"

<a href="#">Most rated</a>

</div>

</figcaption>

</div>

</a>

</div>

<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>

反对回复 2022-06-09

2 回答
0 关注
171 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

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

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

2 回答

添加回答