HTML-如何通過單擊按鈕使文本消失並顯示不同的文本？

Question

因此，我正在嘗試在此網站上進行這種小的“選擇游戲”。

我已經做好了准備，但是...當您單擊確定時，它將帶您到另一頁。 我不想那樣做。

相反，當您單擊“確定”時，我希望文本和按鈕消失，而出現不同的文本/按鈕。

這是我的代碼。 對不起，我的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>

請幫助我，我對HTML非常不好，也希望得到一些建議。 謝謝！

Answer 1

我已經根據您的代碼創建了一個有效的示例。 您可以在此處進行檢查， http://codepen.io/imanik/pen/bEyVpj

 $("#confirm-btn").on("click", function() { $(this).hide(); $("#test").hide(); $("#another").fadeIn("slow"); return false; });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!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> <div id="another" style="display:none;"> <center> <h1 class="center2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sit doloribus officiis praesentium assumenda, quod eaque illum voluptatem voluptatum distinctio.</h1> </center> </div> <center><a href="join1.html" class="center3" id="confirm-btn">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>

它將您不想在開始時顯示的內容的工作方式設置為CSS display屬性為none，以便將其隱藏。

然后使用Jquery定位按鈕並監聽click事件。 當發生這種情況時，只需隱藏您要隱藏的所有元素，並顯示將可見的元素即可。

Answer 2

您為什么不考慮jQuery？ 您必須執行以下步驟：

將這兩個內容放入2個單獨的div中，並給它們兩個不同的id。
使用屬性display：none;初始化另一個div。
單擊按鈕，可以將屬性添加到兩個div中。

碼：

$().ready(function(){
    $("#button").click(function(){
        $("#div-to-hide").attr("display","none");
         $("#divtodisplay").attr("display","block");
     });
});

最初在<style>標記中，您必須設置

#divtodisplaylater{
   display:none;
}

並考慮使用jQuery的不同功能，有關詳細信息，請訪問JQuery網站

http://api.jquery.com/attr/

Answer 3

您不能為多個標簽提供相同的ID，因此請改用類。
<div id="test"> → <div class="test">

將CSS代碼放在外部.css文件中，並在head元素中鏈接到它。

<head>
  <link rel="stylesheet" type="text/css" href="file_name.css"/>
  ...
</head>

至於您的問題，請嘗試：

.will_show {
  display: none;
}

 .will_show { display: none; }

HTML-如何通過單擊按鈕使文本消失並顯示不同的文本？

問題描述

3 個解決方案

解決方案1
2 已采納 2016-02-18 17:09:47

解決方案2
0 2016-02-18 17:07:41

解決方案3
0

HTML-如何通過單擊按鈕使文本消失並顯示不同的文本？

問題描述

3 個解決方案

解決方案1 2 已采納 2016-02-18 17:09:47

解決方案2 0 2016-02-18 17:07:41

解決方案3 0

解決方案1
2 已采納 2016-02-18 17:09:47

解決方案2
0 2016-02-18 17:07:41

解決方案3
0