通过onlick函数更改div

-3

目前我有一些看起来像这样的代码;通过onlick函数更改div

<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更改为下面的注册格，但使用相同的编码类型（如果可能的话），我用于关闭窗口。我知道很明显，我是一名初学者，但我一直在到处寻找，并且玩弄不同的技巧，但我无法想象它！

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

谢谢！

来源

2016-07-07 tttt

这就是 “格” 你想改变什么？您可以尝试使用display none/block属性。 – Coderchu

@Coderchu如果你读过这个问题，你就会知道=>“我想让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';">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>

来源

2016-07-07 06:41:49

“下面的'signup' div你真是太神奇了，非常感谢你！ – tttt

不客气。请记住，注意并检查此答案是否正确。谢谢你，很快见到你;） –

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

来源

2016-07-07 07:01:26 TinhNQ

通过onlick函数更改div

回答

相关问题