Question

目前我有一些看起来像这样的代码;

<div id="welcome">
        <div style="text-align: center;">
            <h1 style="margin-bottom: 0;">Welcome</h1>
            <hr>
            <p>Hi, would you like to sign up or keep watching?</p>
        <button id="intro_signup_button" type="text" onclick="**HERE**">SIGN UP</button>
        <button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none'">KEEP WATCHING</button>
        </div>
    </div>

    <div id="signup">
        <div style="text-align: center;">
            <p>texttextext</p>
        </div>
    </div>

因此，当我单击注册按钮时，我希望div更改为下面的注册div，但使用与关闭窗口相同的编码类型（如果可能）。我知道很明显，我是初学者，但我一直在各处搜索并玩弄不同的技巧，但我无法弄明白！

我真的很感激任何帮助:)

谢谢！

Answer 1

真的很简单：

#signup {
  display: none;
}

<div id="welcome">
  <div style="text-align: center;">
    <h1 style="margin-bottom: 0;">Welcome</h1>
    <hr>
    <p>Hi, would you like to sign up or keep watching?</p>
    <button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';">SIGN UP</button>
    <button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
  </div>
</div>

<div id="signup">
  <div style="text-align: center;">
    <p>texttextext</p>
  </div>
</div>

如果您想要在显示注册层之前隐藏欢迎图层的版本：

#signup {
  display: none;
}

<div id="welcome">
  <div style="text-align: center;">
    <h1 style="margin-bottom: 0;">Welcome</h1>
    <hr>
    <p>Hi, would you like to sign up or keep watching?</p>
    <button id="intro_signup_button" type="text" onclick="document.getElementById('signup').style.display='block';document.getElementById('welcome').style.display='none'">SIGN UP</button>
    <button id="intro_back_button" type="text" onclick="document.getElementById('welcome').style.display='none';">KEEP WATCHING</button>
  </div>
</div>

<div id="signup">
  <div style="text-align: center;">
    <p>texttextext</p>
  </div>
</div>

Answer 2

使用Jquery：

$("#intro_signup_button").click(function() {
  $("#signup").show();
});

$("#intro_back_button").click(function() {
  $("#signup").hide();
});

$("#intro_signup_button").click(function() {
  $("#signup").show();
});

$("#intro_back_button").click(function() {
  $("#signup").hide();
});

#signup {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="welcome">
  <div style="text-align: center;">
    <h1 style="margin-bottom: 0;">Welcome</h1>
    <hr>
    <p>Hi, would you like to sign up or keep watching?</p>
    <button id="intro_signup_button">SIGN UP</button>
    <button id="intro_back_button">KEEP WATCHING</button>
  </div>
</div>
<div id="signup">
  <div style="text-align: center;">
    <p>show sign up</p>
  </div>
</div>

通过onlick函数

2 个答案: