0

DIV の「q4」、「q5」、「q6」、および「q7」を正しい場所に接続するのに問題があります。タブレットをクリックするとq4、Macbookをクリックするとq5、Macをクリックするとq6、iPodをクリックするとq7が表示されます。これがどのように行われるか説明してもらえますか？以下の 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>
4

3 に答える 3

1

どうぞ：

タブレットがクリックされたときにq4を表示したい

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

heretabletとq4areIDsはそれぞれ要素 (ボタンまたは div) です。

q5、q6などについても同じことが言えますIDs. 私の先輩の何人かは以前に答えたと思いますが、質問者が望むより明確な方法で自分自身をクリアしたと思います:)

于 2013-08-24T16:39:22.123 に答える