[英]Show / Hide DIVs with JavaScript
我是 HTML 和 JavaScript 的新手,我有一個小問題我有 3 個 DIV
<div id="div1"> I'm div1 </div>
<div id="div2"> I'm div2 </div>
<div id="div3"> I'm div3 </div>
我有 3 個按鈕,每個按鈕都啟用相應的 DIV 並禁用其他按鈕一次僅顯示 1 個 DIV
<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv1()" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv2()" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv3()" />
我搜索了多個解決方案,他們只展示了如何啟用,我不知道為什么,我無法禁用它們。
只是隱藏 Div - 如果你想占據 Div 空間
function Hide()
{
document.getElementById('div1').style.visibility="hidden";
}
隱藏和移除 Div 元素占用的空間
function Hide()
{
document.getElementById('div1').style.display="none";
}
看看可見性選項。 簡而言之,在您的函數中,您應該調用getElementById
(對於您要修改的 div 的 if),然后將找到的元素樣式的可見性屬性更改為hidden
(隱藏元素)或visible
(顯示)。
function showDiv1(){
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
}
這是顯示/隱藏HTML的簡單版本:
<input type="button" name="Showdiv1" value="div1" />
<input type="button" name="Showdiv2" value="div2" />
<input type="button" name="Showdiv3" value="div3" />
<div id="div1">I'm div1</div>
<div id="div2">I'm div2</div>
<div id="div3">I'm div3</div>
查詢:
$('input[type="button"]').on('click', function () {
var div = "#" + $(this).val();
$('div').hide()
$(div).show()
})
更新:因為你在純 js 中提到這里是方法
<input type="button" name="Showdiv1" value="div1" onclick="showDiv(this)" />
<input type="button" name="Showdiv2" value="div2" onclick="showDiv(this)" />
<input type="button" name="Showdiv3" value="div3" onclick="showDiv(this)" />
<div id="div1">I'm div1</div>
<div id="div2">I'm div2</div>
<div id="div3">I'm div3</div>
JS:
function showDiv(that) {
var len = document.getElementsByTagName('div').length;
for (var i = 0; i < len; i++) {
document.getElementsByTagName('div')[i].style.display = "none";
}
var val = that.value;
document.getElementById(val).style.display = "block";
}
有幾種方法可以做到這一點,減少重復代碼的步驟是這樣的:
<div id=div1> I'm div1 </div>
<div id=div2> I'm div2 </div>
<div id=div3> I'm div3 </div>
<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('1')" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('2')" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('3')" />
JS:
function showDiv(num) {
document.getElementById('div1').style.display='none';
document.getElementById('div2').style.display='none';
document.getElementById('div3').style.display='none';
document.getElementById('div'+num).style.display='block'
}
這是一個純js的簡單解決方案:
<div id=div1> I'm div1 </div>
<div id=div2> I'm div2 </div>
<div id=div3> I'm div3 </div>
<input type="button" name="Showdiv1" value="Show Div 1" onclick="showDiv('div1')" />
<input type="button" name="Showdiv2" value="Show Div 2" onclick="showDiv('div2')" />
<input type="button" name="Showdiv3" value="Show Div 3" onclick="showDiv('div3')" />
<script>
function showDiv(id) {
var divs = document.querySelectorAll("div");
for (var i = 0; i < divs.length; i++) {
divs[i].style.display = "none";
}
var divToShow = document.getElementById(id);
divToShow.style.display = "block";
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.