設計元素的顯示與隱藏,並實現按鈕文字改變

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script>
<body>
window.onload=function()
{
var oBtn=document.getElementById("btn1");
var txt_1=document.getElementById("txt1");
var txt_2=document.getElementById("txt2");
oBtn.onclick=function()
{
if(txt_2.style.display=="block")
{
   txt_1.style.display="block";
   txt_2.style.display="none";
   oBtn.innerHTML = "更新須知"
}
else
{
   txt_1.style.display="none";
   txt_2.style.display="block";
   oBtn.innerHTML = "返回"
}
} }
</script>
<div class="col-md-12 column">
         <div id="txt1" class="jumbotron">
     <h1>
        Welcome
     </h1>
</div>
<div id="txt2" class=" alert alert-dismissable alert-info">
       <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
       <h4>
          注意!
       </h4>
<p>
       <input type="button" id="btn1" value="按鈕"/>
</p>
</body>
</html>

展示效果:

688529379c8be2b3e7fdb358d1059cf4.png-wh_

51bc9e75da9ac6516c133484323e12d6.png-wh_


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章