如何向“多个显示/隐藏DIV”添加更多按钮

时间：2013-08-24 16:17:20

标签： javascript html

我在将DIV的“q4”，“q5”，“q6”和“q7”连接到正确的位置时遇到问题。我希望q4显示何时单击平板电脑，q5显示何时单击Macbook，q6显示何时单击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>

3 个答案:

答案 0 :(得分：2)

使用jQuery show / hide方法：

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

答案 1 :(得分：1)

你走了：

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

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

此处tablet和q4分别是IDs元素（按钮或div）。

同样适用于q5，q6等等，您只需更改IDs即可。 我想我的一些老年人之前已经回答了这个问题，但我认为我已经以更明确的方式清除了自己，提问者想要：）

答案 2 :(得分：1)

找到了罪魁祸首，你试图调用一个函数来显示第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>

虽然此代码可以按照您的预期运行，但请记住使用更好的命名约定，例如我在我的示例HERE.中展示的

相关问题
最新问题