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

检查此内容，我已经使用https://codepen.io/arindamx01/pen/pmjZqJ jQuery

$('.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 个答案: