首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >javascript代码无法显示和隐藏部分时出现问题

javascript代码无法显示和隐藏部分时出现问题
EN

Stack Overflow用户
提问于 2018-10-23 03:03:35
回答 1查看 105关注 0票数 2

各位,我对javascript和HTML部分有一个问题。

我需要单击向下箭头来从第一个更改为另一个,等等。不幸的是,代码没有反应,所以我真的不知道如何解决它。

一个简短的代码,以获得更好的概述。

主要问题将在javascript中。

HTML

HTML足够好,可以更好地面向对象。

代码语言:javascript
复制
  <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以获得更好的概述

代码语言:javascript
复制
.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中。

代码语言: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");    
        }
}

代码语言: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");    
        }
}
代码语言:javascript
复制
.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
复制
  <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>

EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/52936140

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档