如何向多重显示/隐藏DIV添加更多按钮

How do I add more buttons to Multiple Show/Hide DIV

本文关键字：添加 DIV 按钮 隐藏 显示      更新时间：2023-09-26

我在将div的"q4"、"q5"、"q6"answers"q7"连接到它们的合法位置时遇到问题。我希望q4在点击平板电脑时显示，q5在点击Macbook时显示，q 6在点击Mac时显示，以及q7在点击iPod时显示。有人能向我解释一下这是怎么做到的吗？我看了下面的javascript，看到了一种模式，但我该如何添加更多按钮？

<!DOCTYPE html>
<html>
<table>
<td>
<a href="#" onclick="showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="showHide(2);"><button>Cell Phone</button></a>
<a href="#" onclick="showHide(3)"><button>iPad</button></a>
<a href="#" onclick="showHide(3)"><button>iPod</button></a>
<a href="#" onclick="showHide(4);"><button>Tablet</button></a>
<a href="#" onclick="showHide(5);"><button>Macbook</button></a>
<a href="#" onclick="showHide(6)"><button>Mac</button></a>
</td>
</table>
<div id="q1" style="display: none;">
<button onclick="subShowHide('1');">iPhone 5</button>
<button>iPhone 4S</button>
<button>iPhone 4</button>
<button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
<button>HTC</button>
<button>Nokia</button>
<button>Motorola</button>
<button>Blackberry</button>
<button>Samsung</button>
<button>LG</button>
</div>
<div id="q3" style="display: none;">
<button>iPad Mini</button>
<button>iPad 4th Generation</button>
<button>iPad 3rd Generation</button>
<button>iPad 2nd Generation</button>
<button>iPad 1st Generation</button>
</div>
<div id="q4" style="display: none;">
<button>Apple</button>
<button>Amazon</button>
<button>Asus</button>
<button>Google</button>
<button>Microsoft</button>
<button>Samsung</button>
</div>
<div id="q5" style="display: none;">
<button>Macbook</button>
<button>Macbook Air</button>
<button>Macbook Pro</button>
</div>
<div id="q6" style="display: none;">
<button>iMac</button>
<button>Mac Mini</button>
<button>Mac Pro</button>
</div>
<div id="q7" style="display: none;">
<button>Touch</button>
<button>Nano</button>
<button>Classic</button>
</div>
<div id="qq1" style="display: none;">
<button onclick="subSubShowHide('1');">AT&T</button>
<button>Sprint</button>
<button>Verizon</button>
<button>T-Mobile</button>
<button>Unlocked</button>
<button>Other</button>
</div>
<div id="qqq1" style="display: none;">
<button>test1</button>
<button>test2</button>
<button>test3</button>
</div>
<script>
function showHide(obj) {
for(i=1;i<=1;i++){
    document.getElementById('qq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
    document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=4;i++){
    if (i == obj) {
        document.getElementById('q'+i).style.display = 'block';
    } else {
        document.getElementById('q'+i).style.display = 'none';
    }
}
return false;
}
function subShowHide(obj){
for(i=1;i<=1;i++){
    document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
    if (i == obj) {
        document.getElementById('qq'+i).style.display = 'block';
    } else {
        document.getElementById('qq'+i).style.display = 'none';
    }
}
return false;
}
function subSubShowHide(obj){
for(i=1;i<=1;i++){
    if (i == obj) {
        document.getElementById('qqq'+i).style.display = 'block';
    } else {
        document.getElementById('qqq'+i).style.display = 'none';
    }
}
return false;
}
</script>
</html>

使用jQuery show/hide方法：

<script>
$("#buttonID").click(function() {
     $(".groupClass").show("fast");
});
</script>

找到罪魁祸首，您试图调用一个函数来显示第5个元素或第6个元素，但在函数内部，您只检查了4个对象。做了一个小的修正，一切都会好起来的。

下面的工作代码：）

<!DOCTYPE html>
<html>
<table>
<td>
<a href="#" onclick="showHide(1);"><button>iPhone</button></a>
<a href="#" onclick="showHide(2);"><button>Cell Phone</button></a>
<a href="#" onclick="showHide(3)"><button>iPad</button></a>
<a href="#" onclick="showHide(3)"><button>iPod</button></a>
<a href="#" onclick="showHide(4);"><button>Tablet</button></a>
<a href="#" onclick="showHide(5);"><button>Macbook</button></a>
<a href="#" onclick="showHide(6)"><button>Mac</button></a>
</td>
</table>
<div id="q1" style="display: none;">
<button onclick="subShowHide('1');">iPhone 5</button>
<button>iPhone 4S</button>
<button>iPhone 4</button>
<button>iPhone 3GS</button>
</div>
<div id="q2" style="display: none;">
<button>HTC</button>
<button>Nokia</button>
<button>Motorola</button>
<button>Blackberry</button>
<button>Samsung</button>
<button>LG</button>
</div>
<div id="q3" style="display: none;">
<button>iPad Mini</button>
<button>iPad 4th Generation</button>
<button>iPad 3rd Generation</button>
<button>iPad 2nd Generation</button>
<button>iPad 1st Generation</button>
</div>
<div id="q4" style="display: none;">
<button>Apple</button>
<button>Amazon</button>
<button>Asus</button>
<button>Google</button>
<button>Microsoft</button>
<button>Samsung</button>
</div>
<div id="q5" style="display: none;">
<button>Macbook</button>
<button>Macbook Air</button>
<button>Macbook Pro</button>
</div>
<div id="q6" style="display: none;">
<button>iMac</button>
<button>Mac Mini</button>
<button>Mac Pro</button>
</div>
<div id="q7" style="display: none;">
<button>Touch</button>
<button>Nano</button>
<button>Classic</button>
</div>
<div id="qq1" style="display: none;">
<button onclick="subSubShowHide('1');">AT&T</button>
<button>Sprint</button>
<button>Verizon</button>
<button>T-Mobile</button>
<button>Unlocked</button>
<button>Other</button>
</div>
<div id="qqq1" style="display: none;">
<button>test1</button>
<button>test2</button>
<button>test3</button>
</div>
<script>
function showHide(obj) {
for(i=1;i<=1;i++){
    document.getElementById('qq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
    document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=6;i++){  //CHANGED THIS LINE
    if (i == obj) {
        document.getElementById('q'+i).style.display = 'block';
    } else {
        document.getElementById('q'+i).style.display = 'none';
    }
}
return false;
}
function subShowHide(obj){
for(i=1;i<=1;i++){
    document.getElementById('qqq'+i).style.display = 'none';
}
for(i=1;i<=1;i++){
    if (i == obj) {
        document.getElementById('qq'+i).style.display = 'block';
    } else {
        document.getElementById('qq'+i).style.display = 'none';
    }
}
return false;
}
function subSubShowHide(obj){
for(i=1;i<=1;i++){
    if (i == obj) {
        document.getElementById('qqq'+i).style.display = 'block';
    } else {
        document.getElementById('qqq'+i).style.display = 'none';
    }
}
return false;
}
</script>
</html>

尽管这段代码可以按照您的预期工作，但请记住使用更好的命名约定，就像我在这里的示例中演示的那样。

开始：

我想在点击平板电脑时显示q4

$('#tablet').click(function(){
$('#q4').show();
});

这里CCD_ 3和CCD_ 4分别是元素（按钮或div）的CCD_。

同样适用于q5、q6等等，您只需要更改IDs。我想我的一些前辈以前已经回答过了，但我认为我已经用提问者想要的更清晰的方式澄清了自己：）

相关文章：