有没有其他方法在点击“按钮”后在网站上显示其他文字？

Question

所以基本上，我正在尝试建立自己的投资组合网站但其中一项似乎没有用，这是我的

基本上我想要做的就是我想点击“关于”以显示h1“关于我”并消失“我的名字”

我在那里写了一些javascript但似乎没有用。

HTML

<div id="particles-js">
    <main id="main" class="flex-center flex-column">
        <h1 id="title">My name</h1>
        <ul id="menu" class="list-unstyled list-inline">
            <li class="list-inline-item"><a href="#" onclick="OpenAbout()">About</a></li>
        <li class="list-inline-item"><a href="" target="_blank">GitHub</a></li>
        <li class="list-inline-item"><a href="">Contact</a></li>
        </ul>
        </main>

        <section id="about" class="d-none">
            <h1>ABOUT ME</h1>

        </section>
</div>

CSS

body {
    margin: 0;
}

#title {
    color: #ffffff;
    position: absolute;
    text-align: center;
    top: 30%;
    width: 100%;
    font-style: italic;
    font-size: 65px;
}

#menu {
    color: #ffffff;
    position: absolute;
    text-align: center;
    top: 48%;
    font-size: 13px;
    width: 98%;
}

#particles-js {
    background-color: #0d3677;
    height: 100vh;
}

#about {
    position: absolute;
    width: 100%;
}

section {
    max-height: 100vh !important; 
    overflow: auto; 
    opacity: 0;
}

JS

function OpenAbout(){$("#main").animate({opacity:0,},160);$("#about").removeClass("d-none").animate({opacity:1,},160);}function OpenMain(){$("#main").animate({opacity:1,},160);$("#about").animate({opacity:0,},160,"swing",function(){$("#about").addClass("d-none");});}

Answer 1

检查我用jquery做了这个https://codepen.io/arindamx01/pen/pmjZqJ

 $('.openAbout').on('click', function(){ $('#title').after('<h1 id="about" class="commonTitle" style="display:none;">ABOUT ME</h1>') $('#title').fadeOut(); $('#about').fadeIn(); });

 body { margin: 0; } .commonTitle { color: #ffffff; position: absolute; text-align: center; top: 30%; width: 100%; font-style: italic; font-size: 65px; } #menu { color: #ffffff; position: absolute; text-align: center; top: 48%; font-size: 13px; width: 98%; } #particles-js { background-color: #0d3677; height: 100vh; } #about { position: absolute; width: 100%; } section { max-height: 100vh !important; overflow: auto; opacity: 0; }

 <html> <head> <link rel=stylesheet href="https://fonts.googleapis.com/css?family=Fjalla+One|Source+Sans+Pro:300,600"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div id="particles-js"> <main id="main" class="flex-center flex-column"> <h1 id="title" class="commonTitle">My name</h1> <ul id="menu" class="list-unstyled list-inline"> <li class="list-inline-item"><a href="#" class="openAbout">About</a></li> <li class="list-inline-item"><a href="" target="_blank">GitHub</a></li> <li class="list-inline-item"><a href="">Contact</a></li> </ul> </main> <section id="about" class="d-none"> <h1>ABOUT ME</h1> </section> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </body> </html>

有没有其他方法在点击“按钮”后在网站上显示其他文字？

问题描述

1 个解决方案

解决方案1
0 2019-05-08 18:48:57

有没有其他方法在点击“按钮”后在网站上显示其他文字？

问题描述

1 个解决方案

解决方案1 0 2019-05-08 18:48:57

解决方案1
0 2019-05-08 18:48:57