Javascript HTML-如何使文本消失，并使不同的文本显示从一个按钮按下？_Javascript_Jquery_Html

Javascript HTML-如何使文本消失，并使不同的文本显示从一个按钮按下？

javascript jquery html

Javascript HTML-如何使文本消失，并使不同的文本显示从一个按钮按下？,javascript,jquery,html,Javascript,Jquery,Html,所以我想在这个网站上做一个类似“选择游戏”的小游戏我已经准备好了，但是。。。当您单击“确定”时，它会将您带到另一个页面。我不想那样做相反，当您单击“确定”时，我希望文本和按钮消失，并显示不同的文本/按钮这是我的密码。请原谅我糟糕的HTML，我不是很好 <!DOCTYPE html> <html> <head> <meta name="theme-color" content="#18191b"> <link rel="icon" si

所以我想在这个网站上做一个类似“选择游戏”的小游戏

我已经准备好了，但是。。。当您单击“确定”时，它会将您带到另一个页面。我不想那样做

相反，当您单击“确定”时，我希望文本和按钮消失，并显示不同的文本/按钮

这是我的密码。请原谅我糟糕的HTML，我不是很好

<!DOCTYPE html>
<html>
<head>
<meta name="theme-color" content="#18191b">
<link rel="icon" sizes="192x192" href="assets/trans.gif">
<title>...</title>
</head>


<div class="audio">
<audio autoplay="true" src="assets/Virtual Campfire with Crackling Fire Sounds (HD).mp3"/>
</div>


<div id="test">
<center><h1 class="center2">Do you want to join the campfire?<br> There is one person there... looking sad.</h1></center>
</div>
<center><a href="join1.html" class="center3">Sure.</a></center>


<div id="test">
<center><img class="center" src="assets/trans.gif"/></center>
</div>

<style>
    img.center {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    display:block;
    position: relative;
    top: 200px;
    }
    h1.center2 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Myriad Pro";
    text-align: center;
    top: 70px;
    position: relative;
}
a.center3 {
    margin: auto;
    width: 60%;
    padding: 10px;
    color: white;
    font-family: "Calibri Light";
    text-align: center;
    top: 80px;
    position: relative;
    font-size: 25px;
    color: #EEB300;
}
#test h1 {
    margin-top: 25px;
    font-size: 45px;
    text-align: center;

    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
</style>

<body style="background-color:#18191b">
</body>

</html>


...
模拟中心{
背景重复：无重复；
背景附件：固定；
背景位置：中心；
显示：块；
位置：相对位置；
顶部：200px；
}
h1.2{
保证金：自动；
宽度：60%；
填充：10px；
颜色：白色；
字体系列：“Myriad Pro”；
文本对齐：居中；
顶部：70像素；
位置：相对位置；
}
a、 中心3{
保证金：自动；
宽度：60%；
填充：10px；
颜色：白色；
字体系列：“Calibri Light”；
文本对齐：居中；
顶部：80px；
位置：相对位置；
字体大小：25px；
颜色：#EEB300；
}
#测试h1{
边缘顶部：25px；
字体大小：45px；
文本对齐：居中；
-webkit动画：fadein 2s；/*Safari、Chrome和Opera>12.1*/
-moz动画：fadein 2s；/*Firefox<16*/
-ms动画：fadein 2s；/*Internet Explorer*/
-o-动画：fadein 2s；/*Opera<12.1*/
动画：Fadein2S；
}
@关键帧淡入淡出{
从{opacity:0；}
到{opacity:1；}
}
/*Firefox<16*/
@-moz关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
/*Safari、Chrome和Opera>12.1*/
@-webkit关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
/*Internet Explorer*/
@-ms关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}
/*歌剧<12.1*/
@-o-关键帧fadein{
从{opacity:0；}
到{opacity:1；}
}

请帮帮我，我对HTML很不在行，也希望得到一些建议。谢谢

将这两个内容放在两个单独的div中，并给它们两个不同的id

使用属性display初始化另一个div：none

单击按钮，可以向两个div添加属性

代码：

在

标记中，首先必须设置

#divtodisplaylater{
   display:none;
}

并考虑jQuery为不同的函数，在jQuery网站

函数的细节

为什么不考虑jQuery？您必须执行以下步骤：