通过onlick函数

时间:2016-07-07 06:37:33

标签: javascript html css

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

<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,但使用与关闭窗口相同的编码类型(如果可能)。我知道很明显,我是初学者,但我一直在各处搜索并玩弄不同的技巧,但我无法弄明白!

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

谢谢!

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

使用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>