各位,我对javascript和HTML部分有一个问题。
我需要单击向下箭头来从第一个更改为另一个,等等。不幸的是,代码没有反应,所以我真的不知道如何解决它。
一个简短的代码,以获得更好的概述。
主要问题将在javascript中。
HTML
HTML足够好,可以更好地面向对象。
<section> <div style="width:40px; height:40px; background-color:black;" onclick="bottomscroll()"> </section>
<section > <h1>text</h1></section>
<section> <h1>text</h1></section>
<section> <h1>text</h1></section>
<section> <h1>text</h1></section>
CSS
我还缩短了CSS以获得更好的概述
.display-block { display:block; }
.display-none { display:none; }
#fullpage { overflow: hidden; margin: 0; padding: 0;
}
#fullpage section { min-height: 100%; }
#fullpage section h4 { margin: 0; padding: 0; }
#fullpage section:nth-child(1)
{
color:black;
background:url(/img/fabian-grohs-597395-unsplash.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
}
#fullpage section:nth-child(1) h1
{
margin: 0;
padding: 0;
color:whitesmoke;
text-align: center;
padding: 70px;
font-family: 'Montserrat', sans-serif;
font-size:40px;
}
#fullpage section:nth-child(1) p
{
text-align: center;
color:white;
font-size:18px;
width: 70%;
margin:0 auto;
font-family: 'Inconsolata', monospace;
position: relative;
}
#fullpage section:nth-child(2)
{
color:#333;
background: white;
min-height: 100vh;
}
#fullpage section:nth-child(2) h1
{
margin: 0;
padding: 0;
color:#333;
text-align: center;
padding: 20px 0px;
font-family: 'Montserrat', sans-serif;
}
#fullpage section:nth-child(3)
{
color:black;
background: green;
min-height: 100vh;
}
#fullpage section:nth-child(4)
{
color:black;
background: green;
min-height: 100vh;
}
#fullpage section:nth-child(5)
{
color:black;
background: green;
min-height: 100vh;
}
Javascript
主要问题将在javascript中。
var page = 1;
function topscroll()
{
if(page != 1)
{
page -= 1;
var page = document.querySelector("#fullpage section:nth-child("+page")");
for(i = 0; i < 5; i++)
{
var pagehidden = document.querySelector("#fullpage section:nth-child("+i")");
pagehidden.classList.add("display-none");
pagehidden.classList.remove("display-block");
}
page.classList.add("display-block");
}
}
function bottomscroll()
{
if(page != 5)
{
page += 1;
var page = document.querySelector("#fullpage section:nth-child("+page")");
for(i = 0; i < 5; i++)
{
var pagehidden = document.querySelector("#fullpage section:nth-child("+i")");
pagehidden.classList.add("display-none");
pagehidden.classList.remove("display-block");
}
page.classList.add("display-block");
}
}
var page = 1;
function topscroll()
{
if(page != 1)
{
page -= 1;
var page = document.querySelector("#fullpage section:nth-child("+page")");
for(i = 0; i < 5; i++)
{
var pagehidden = document.querySelector("#fullpage section:nth-child("+i")");
pagehidden.classList.add("display-none");
pagehidden.classList.remove("display-block");
}
page.classList.add("display-block");
}
}
function bottomscroll()
{
if(page != 5)
{
page += 1;
var page = document.querySelector("#fullpage section:nth-child("+page")");
for(i = 0; i < 5; i++)
{
var pagehidden = document.querySelector("#fullpage section:nth-child("+i")");
pagehidden.classList.add("display-none");
pagehidden.classList.remove("display-block");
}
page.classList.add("display-block");
}
}
.display-block { display:block; }
.display-none { display:none; }
#fullpage { overflow: hidden; margin: 0; padding: 0;
}
#fullpage section { min-height: 100%; }
#fullpage section h4 { margin: 0; padding: 0; }
#fullpage section:nth-child(1)
{
color:black;
background:url(/img/fabian-grohs-597395-unsplash.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
}
#fullpage section:nth-child(1) h1
{
margin: 0;
padding: 0;
color:whitesmoke;
text-align: center;
padding: 70px;
font-family: 'Montserrat', sans-serif;
font-size:40px;
}
#fullpage section:nth-child(1) p
{
text-align: center;
color:white;
font-size:18px;
width: 70%;
margin:0 auto;
font-family: 'Inconsolata', monospace;
position: relative;
}
#fullpage section:nth-child(2)
{
color:#333;
background: white;
min-height: 100vh;
}
#fullpage section:nth-child(2) h1
{
margin: 0;
padding: 0;
color:#333;
text-align: center;
padding: 20px 0px;
font-family: 'Montserrat', sans-serif;
}
#fullpage section:nth-child(3)
{
color:black;
background: green;
min-height: 100vh;
}
#fullpage section:nth-child(4)
{
color:black;
background: green;
min-height: 100vh;
}
#fullpage section:nth-child(5)
{
color:black;
background: green;
min-height: 100vh;
}
<section> <div style="width:40px; height:40px; background-color:black;" onclick="bottomscroll()"> </section>
<section><h1>text</h1></section>
<section><h1>text</h1></section>
<section><h1>text</h1></section>
<section><h1>text</h1></section>
发布于 2018-10-23 03:30:20
您的问题是,每次循环遍历要删除的元素时,添加display-none
类,然后删除 display-block
,然后在循环结束后将display-block
添加到所需的元素中,而不删除添加到循环中的display-none
。
代码应该是这样的:
function bottomscroll()
{
...
page.classList.remove("display-none"); /*added this*/
page.classList.add("display-block");
...
}
topscroll()
的相同逻辑
这是一个完整的工作代码,只有一个函数(在更正其他错误之后):
var nb = 1;
function bottomscroll() {
if (nb != 4) {
nb += 1;
var page = document.querySelector("#fullpage section:nth-child(" + nb + ")");
for (var i = 1; i < 4; i++) {
var pagehidden = document.querySelector("#fullpage section:nth-child(" + i + ")");
pagehidden.classList.add("display-none");
pagehidden.classList.remove("display-block");
}
page.classList.remove("display-none");
page.classList.add("display-block");
}
}
.display-block {
display: block;
}
.display-none {
display: none;
}
#fullpage {
overflow: hidden;
margin: 0;
padding: 0;
}
#fullpage section {
min-height: 100%;
}
#fullpage section h4 {
margin: 0;
padding: 0;
}
#fullpage section:nth-child(1) {
color: black;
background: url(/img/fabian-grohs-597395-unsplash.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
}
#fullpage section:nth-child(1) h1 {
margin: 0;
padding: 0;
color: whitesmoke;
text-align: center;
padding: 70px;
font-family: 'Montserrat', sans-serif;
font-size: 40px;
}
#fullpage section:nth-child(1) p {
text-align: center;
color: white;
font-size: 18px;
width: 70%;
margin: 0 auto;
font-family: 'Inconsolata', monospace;
position: relative;
}
#fullpage section:nth-child(2) {
color: #333;
background: white;
min-height: 100vh;
}
#fullpage section:nth-child(2) h1 {
margin: 0;
padding: 0;
color: #333;
text-align: center;
padding: 20px 0px;
font-family: 'Montserrat', sans-serif;
}
#fullpage section:nth-child(3) {
color: black;
background: green;
min-height: 100vh;
}
#fullpage section:nth-child(4) {
color: black;
background: green;
min-height: 100vh;
}
#fullpage section:nth-child(5) {
color: black;
background: blue;
min-height: 100vh;
}
<div style="width:40px; height:40px; background-color:black;" onclick="bottomscroll()"> </div>
<div id="fullpage">
<section>
<h1>text1</h1>
</section>
<section>
<h1>text2</h1>
</section>
<section>
<h1>text3</h1>
</section>
<section>
<h1>text4</h1>
</section>
</div>
https://stackoverflow.com/questions/52936140
复制相似问题