當前位置：首頁 » 編程語言 » html按鈕顯示

html按鈕顯示

發布時間: 2021-03-06 21:05:47

① html設置一個按鈕，按按鈕彈出新的網頁怎麼

<input type="button" value="new page" onclick="window.open('webform1.aspx','_blank')">
這樣可以了

② html如何點擊按鈕在文本框顯示內容！

1、使用jquery顯示出隱藏的文本框
$(function(){
$("#按鈕id").click(function(){//按鈕綁定點擊事件
$("#文本框id").show();//文本框顯示出來註：之前設置display:none的樣式
});
});
2、使用jquery新添加文本框
$(function(){
$("#按鈕id").click(function(){//按鈕綁定點擊事件
var txt=$("
");//創建文本框對象
$("#id").append(txt);//將對象添加至網頁 $("#id")是文本框的上一級
});
});

③ html中怎麼實現點擊按鈕出現如圖效果

④ html點擊按鈕彈出窗口如何實現

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}

.firstBox h5 {
font-size: 30px;
color: #000;
font-weight: 700;
}

.firstBox table {
border: 1px solid #E6E6E6;
margin: 15px 0px;
}

.firstBox table thead {
background: #E6E6E6;
}

.firstBox table tr td {
width: 150px;
text-align: center;
}

.firstBox button {
width: 100px;
height: 40px;
background: #E6E6E6;
border: 1px solid #C7D3E6;
text-align: center;
line-height: 40px;
font-size: 16px;
color: #000;
cursor: pointer;
}

#twoBox {
margin: 20px 0px 0px;
background: #E6E6E6;
height: 250px;
width: 310px;
position: relative;
display: none;
}

#twoBox .twoBox_lever {
width: 290px;
height: 230px;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
position: absolute;
right: 0;
top: 0;
left: 0;
bottom: 0;
margin: auto;
}

.twoBox_lever_two {
width: calc(100% - 10px);
height: calc(100% - 10px);
padding: 5px;
}

.twoBox_lever_two .two_title {
width: 100%;
height: 40px;
background: #E6E6E6;
border: 1px solid #ccc;
border-radius: 5px;
}

.twoBox_lever_two .two_title p {
font-size: 16px;
color: #000;
line-height: 40px;
padding-left: 10px;
font-weight: 700;
}

.twoBox_lever_two form {
width: calc(100% - 20px);
margin: 10px;
border-bottom: 1px solid #ccc;
height: calc(100% - 100px);
}

.twoBox_lever_two form input {
height: 20px;
line-height: 20px;
padding: 0px 10px;
margin: 5px;
cursor: pointer;
}

.twoBox_lever_two .two_footer {
height: 40px;
text-align: right;
padding-right: 10px;
}

.twoBox_lever_two .two_footer button {
height: 30px;
background: #E6E6E6;
border: 1px solid #C7D3E6;
text-align: center;
line-height: 30px;
font-size: 16px;
color: #000;
cursor: pointer;
}

.twoBox_lever_two .two_footer button:first-of-type {
width: 120px;
padding: 0px 10px;
}

.twoBox_lever_two .two_footer button:last-of-type {
width: 50px;
}

.show {
display: block !important;
}
</style>
</head>
<body>
<div style="margin:10px;">

<div class="firstBox">
<h5>已有的用戶：</h5>
<table>
<thead>
<tr>
<th>名字</th>
<th>郵箱</th>
<th>密碼</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td>[email protected]</td>
<td>xingtuan</td>
</tr>
</tbody>
</table>
<button id="button">創建新用戶</button>
</div>

<div id="twoBox">
<div class="twoBox_lever">
<div class="twoBox_lever_two">
<div class="two_title">
<p>創建新用戶</p>
</div>
<form>
<label style="float:left">名字：
<input type="text" placeholder="請輸入名字">
</label>
<label style="float:left">郵箱：
<input type="text" placeholder="請輸入郵箱">
</label>
<label style="float:left">密碼：
<input type="password" placeholder="請輸入密碼">
</label>
</form>
<div class="two_footer">
<button>創建一個用戶</button>
<button>取消</button>
</div>
</div>
</div>
</div>

</div>
</body>
<script>
window.onload = function () {
document.getElementById("button").onclick = function () {
document.getElementById("twoBox").classList.add("show")
}
}
</script>
</html>

⑤ html 按鈕隱藏作用

可以使用js來實現按鈕和文本的顯示隱藏。

1.創建一個新的html文檔，在版body標簽權中添加span標簽和按鈕標簽，並為每個標簽設置一個id：

⑥ html如何按按鈕後更改一段html代碼並立即顯示

請點擊輸入圖片描只調換id可以實現

⑦ html 點擊按鈕隱藏，點擊另外一個按鈕顯示

<div id="xxx" style="display:block">ないよう</div>
<input type="button" onClick="aaa()" value="隱藏">
<input type="button" onClick="aaa()" value="顯示">

<script>
function aaa(){if(document.getElementById("xxx").style.display=="block"){document.getElementById("xxx").style.display="none";}else{document.getElementById("xxx").style.display="block";}
}

</script>
網路貼吧:安林網路吧

⑧ HTML如何實現單擊按鈕後顯示隱藏表格

<html>
<head>
<title>利用抄Dom屬性來創建表格</title>
<script type="text/javascript">
function toggle(id){
var tb=document.getElementById(id);
if(tb.style.display=='none') tb.style.display='block';
else tb.style.display='none';
}
</script>
</head>
<body>
<input type="button" value="顯示/隱藏" onClick="toggle('table1')"/>
<table border="1" id="table1">
<tr><td>2</td><td>3</td></tr>
</table>
</body>
</html>