0

I'm having a problem connecting DIV's "q4", "q5", "q6", and "q7" to their rightful places. I want q4 to show when tablet is clicked, q5 to show when Macbook is clicked, q6 to show when Mac is clicked, and q7 to show when iPod is clicked. Could some please explain to me how this is done? I look at the javascript below and I kind of see a pattern but how do I add more buttons?

<!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>
4

3 回答 3

2

使用 jQuery show/hide方法：

<script>
$("#buttonID").click(function() {
     $(".groupClass").show("fast");
});
</script>
于 2013-08-24T16:26:57.190 回答
1

Here you go:

I want q4 to show when tablet is clicked

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

here tablet and q4 are IDs of the elements(button or div) respectively.

Same goes for the q5,q6 and so on you just need to change the IDs. I think some of my seniors have answered it before but I think I have cleared my self in a more clear ways that the questioner wants :)

于 2013-08-24T16:39:22.123 回答
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>

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

于 2013-08-24T16:50:23.833 回答